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>
- 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
3 Answers
Reset to default 4To 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>