admin管理员组

文章数量:1394772

I have a javascript array where, for each iteration, a name is added to the end using the push feature. I'm sending this array to a html file where it will be displayed. Currently displaying this array after all iterations have pleted gives:

John, Smith, Paul, Doe

However, I wish the array to be displayed vertically like:

John
Smith
Paul
Doe

In Javascript, is there some way to specify for each name to be entered as a new row in the array? In Matlab you can easily specify which row or column you want data to be stored in the array but I am yet to find a simple approach in Javascript.

Thank you for any help you might be able to give me!

UPDATE: Javascript (simplified):

port.onMessage.addListener(function(msg) {
    var Array = []
    var Names = ["John", "Smith", "Paul", "Doe"]
    for (var p = 0; p < Names.length; p++) {
    Array.push(Names[p])
    }
    document.getElementById('status').textContent = Array;
});

HTML (simplified):

<html>
    <head>
    <script src="Javascript.js"></script>
        <style type="text/css" media="screen">
            body { 
                min-width       : 400px;
                min-height      : 300px;
                text-align      : right;
                background-color: #D0D0D0; }
            #status { 
                font-size       : 10px;
                color           : #0000CC;
                text-align      : left;
                font-family     : "Times New Roman", Times, serif; }
        </style>
    </head>
    <body>
    <div id="status"></div>
    </body>
</html>

I have a javascript array where, for each iteration, a name is added to the end using the push feature. I'm sending this array to a html file where it will be displayed. Currently displaying this array after all iterations have pleted gives:

John, Smith, Paul, Doe

However, I wish the array to be displayed vertically like:

John
Smith
Paul
Doe

In Javascript, is there some way to specify for each name to be entered as a new row in the array? In Matlab you can easily specify which row or column you want data to be stored in the array but I am yet to find a simple approach in Javascript.

Thank you for any help you might be able to give me!

UPDATE: Javascript (simplified):

port.onMessage.addListener(function(msg) {
    var Array = []
    var Names = ["John", "Smith", "Paul", "Doe"]
    for (var p = 0; p < Names.length; p++) {
    Array.push(Names[p])
    }
    document.getElementById('status').textContent = Array;
});

HTML (simplified):

<html>
    <head>
    <script src="Javascript.js"></script>
        <style type="text/css" media="screen">
            body { 
                min-width       : 400px;
                min-height      : 300px;
                text-align      : right;
                background-color: #D0D0D0; }
            #status { 
                font-size       : 10px;
                color           : #0000CC;
                text-align      : left;
                font-family     : "Times New Roman", Times, serif; }
        </style>
    </head>
    <body>
    <div id="status"></div>
    </body>
</html>
  • javascript
  • html
  • arrays
Share Improve this question edited Jul 1, 2015 at 3:15 MSTTm asked Jul 1, 2015 at 2:58 MSTTmMSTTm 3033 gold badges8 silver badges18 bronze badges 7
  • 2 Presentation is not handled by JavaScript. You can show your array however you want. It all depends on what is the output, like the console, or a webpage. – elclanrs Commented Jul 1, 2015 at 3:00
  • do you mean like array[3] = 'John' ? – guergana Commented Jul 1, 2015 at 3:00
  • 2 The html / dom displays your list, not the JS array representaion. Add <br /> tags between items. – Brandon Smith Commented Jul 1, 2015 at 3:00
  • Please provide some code so we can help. – Brandon Smith Commented Jul 1, 2015 at 3:01
  • Yes, guergana, something like that. – MSTTm Commented Jul 1, 2015 at 3:05
 |  Show 2 more ments

3 Answers 3

Reset to default 4

To respect newlines in CSS you can use the white-space property. First join the items with newlines:

var array = ['one', 'two', 'three']
element.textContent = array.join('\n')

Then set the appropriate CSS:

element {
  white-space: pre
}


var p = document.querySelector('p')

var array = ['one', 'two', 'three']

p.textContent = array.join('\n')
p {
  white-space: pre
}
<p></p>

Try utilizing Array.prototype.forEach to iterate array arr , create text node for each item within arr , append text node with "\n" concatenated to pre element. 

var arr = ["John", "Smith", "Paul", "Doe"];
var elem = document.getElementsByTagName("pre")[0];
arr.forEach(function(el, i) {
  elem.appendChild(
    document.createTextNode(el + "\n")
  )
})
<pre></pre>

var names = ["John", "Smith", "Paul", "Doe"];
document.getElementById('out').innerHTML = names.join('<br>');
<div id="out"></id>

本文标签： htmlJavascript Vertical ArrayStack Overflow

版权声明：本文标题：html - Javascript Vertical Array - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744093768a2589905.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。