How can I print a js array into a div in html?

Question

Why I cant display elements that I push into an array, into an html div. Im just trying to print the word hello 3 times, but it does not work. When I print the array into the console the array does show the 3 Hello's.

$(function() {
  var $buttonsArray = [];
  var $buttondiv = $('#btndiv');

  for (var i = 0; i < 3; i++) {
    var $button = "hello";
    $buttonsArray.push($button);
  }

  for (var j = 0; j < $buttonsArray.length; j++) {
    $buttondiv.append($buttonsArray[j]);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btndiv"></div>

You are appending the whole array, either append the current item (`$buttonsArray[j]`) or get rid of the second loop, it should cast to string just fine. — msg, Apr 23 '20 at 23:31
Thanks for answering. I actually do have ($buttonsArray[j]), In my code but still It does not work. I deleted the second loop but still no success. Any other ideas? is it a problem if $button is a string? — ivan, Apr 23 '20 at 23:47
Turned your code into a runnable snippet, I just added the `div` and jQuery, and as you can see, it works just fine. — msg, Apr 24 '20 at 00:00
I see, yeah works fine here. Im gonna check my jquery link and see if there is something wrong there. Thank you so much for your time!! — ivan, Apr 24 '20 at 00:27

score 0 · Accepted Answer · answered Apr 24 '20 at 19:41

HTML is mainly text (or call it a string) and javascript variables can be string, number, objects, arrays.

By default, on all those javascript types, if you just place them into a DOM elements, the browser will attempt to convert them to string.

const someNumber = 1
const someString = 'hello'
const someObject = {answer:42}
const someArray = [1, 'help', 3, {a:2}]

document.write(someNumber + '<br/ >')
document.write(someString + '<br/ >')
document.write(someObject + '<br/ >')
document.write(someArray + '<br/ >')

// is the same as 
document.write(someNumber.toString() + '<br/ >')
document.write(someString.toString() + '<br/ >')
document.write(someObject.toString() + '<br/ >')
document.write(someArray.toString() + '<br/ >')

When you deal with an array, you can use .join to regroup them

for example

const greets = ['allo', 'hello', 'holla'];

function render() {  
  // This write the list separated with comas using join
  document.getElementById('app').innerHTML = greets.join(', ');
  
  // This works too but can be slow and doesn't not allow much flexibility
  document.getElementById('debug').innerHTML = JSON.stringify(greets);
}

render();

setTimeout(() => {
  greets.push('oi');
  render();
}, 1000)

<div id="app"></div>
<pre id="debug"></pre>

Please don't recommend or even show the use of `document.write` in examples. See [Why is document.write considered a “bad practice”?](https://stackoverflow.com/q/802854/215552) — Heretic Monkey, Apr 24 '20 at 19:44
This is great help. Love how you explain the way how browsers treat arrays, Thanks for the information. — ivan, Apr 24 '20 at 20:24
I am sorry Heretic, it was for the purpose of writing a small example, we can acheive the same with someElement.innerHTML = someNumber + '
' + someString + '
' + ... etc. — zeachco, Apr 25 '20 at 00:39

How can I print a js array into a div in html?

1 Answers1