Javascript Vertical Array

Question

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 completed 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>

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
– elclanrs, Commented Jul 1, 2015 at 3:00
The html / dom displays your list, not the JS array representaion. Add <br /> tags between items. — Brandon Smith
– Brandon Smith, Commented Jul 1, 2015 at 3:00

elclanrs · Accepted Answer · 2015-07-01 03:12:21Z

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>

answered Jul 1, 2015 at 3:12

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MSTTm Over a year ago

Where, within the html file, are the <p> tags placed? In the body? And is the p{} section placed within the <style> section?

guest271314 · Accepted Answer · 2015-07-01 03:15:07Z

2

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>

answered Jul 1, 2015 at 3:15

guest271314

1

5 Comments

MSTTm Over a year ago

Just to clarify, do the <pre> tags go in the body section of the html file?

guest271314 Over a year ago

@MSTTm "Just to clarify, do the <pre> tags go in the body section of the html file?" Yes.

MSTTm Over a year ago

So the body section should look like: <body> <div id="status"></div> <pre></pre> </body>

guest271314 Over a year ago

"So the body section should look like: <body> <div id="status"></div> <pre></pre> </body>" Given html at Question , js at post above, try <body> <pre id="status"></pre> </body> . css defined within style element for #status should still be applied .

MSTTm Over a year ago

Thank you guys so much for your help. However, I'm getting a strange error: "Cannot read property 'appendChild' of undefined"

Nina Scholz · Accepted Answer · 2015-07-01 08:41:54Z

0

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

<div id="out"></id>

answered Jul 1, 2015 at 8:41

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

Javascript Vertical Array

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related