A silly error with looping over the Array

Question

I just read a article about for in statement: blog.niftysnippets.org/2010/11/myths-and-realities-of-forin.html and created a little array:

<script>
var stuff, index;
stuff = ['a', 'b', 'c'];
stuff.name = "Foo";
for (index in stuff) {
x = document.getElementById("demo")
        x.innerHTML = console.log("stuff[" + index + "] = " + stuff[index])
}

</script>

But it doesn't work. Can someone show me what is wrong with it?

[Works for me](https://jsfiddle.net/900cfufk/). What it does is a bit odd, though: It outputs to the console and repeatedly sets an element's HTML to `"undefined"` (since `console.log` doesn't return anything). But as I tried to say in that blog post, don't use `for-in` for this unless you really have a good reason to. Related question here on SO: [*For-each over an array in JavaScript?*](http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — T.J. Crowder, Jul 26 '16 at 09:23
Sorry but `x.innerHTML = console.log()` makes my eyes hurt, really. — Álvaro González, Jul 26 '16 at 09:24
:) Agree with @ÁlvaroGonzález, what's up with that console.log there? — Ionut Necula, Jul 26 '16 at 09:25

score 1 · Accepted Answer · answered Jul 26 '16 at 09:26

You need to add the result to the former result and change the call of console.log and add for the display a break.

var stuff = ['a', 'b', 'c'],
    index,
    x = document.getElementById("demo");

stuff.name = "Foo";
for (index in stuff) {
    x.innerHTML += "stuff[" + index + "] = " + stuff[index] + '<br>';
    //          ^^                                          ^^^^^^^^
}

<div id="demo"></div>

score 0 · Answer 2 · answered Jul 26 '16 at 09:26

0

console.log will log in the console

and innerHTML will set html content.

These are two different operations.

And if you want to set the html content to the strings, then I would suggest you form a single string and then set innerHTML , this will reduce dom operations/manipulation.

var stuff, index;
stuff = ['a', 'b', 'c'];
stuff.name = "Foo";
var str = "";

for (index in stuff) {
  console.log("stuff[" + index + "] = " + stuff[index])
  str += "stuff[" + index + "] = " + stuff[index] + "<br/>";
}
x = document.getElementById("demo");
x.innerHTML = str;

<div id="demo"></div>

answered Jul 26 '16 at 09:26

Himanshu Tyagi

5,201
1
23
43

Can we remove this: console.log("stuff[" + index + "] = " + stuff[index]) ? – Giorgi Giorgi Jul 26 '16 at 09:30
Yes you can remove it, if you don't want to log anything in the console. – Himanshu Tyagi Jul 26 '16 at 09:31

score 0 · Answer 3 · answered Jul 26 '16 at 09:27

First you cannot define innerHTML to be console.log funciton. The function does not return the string you put in it. So it will be undefined. Secondly you override the innerHTML every loop. If you want to stack you need to concatenate strings. And you dont need to call document.getElementById every loop if is the same.

<script>
var stuff, index;
stuff = ['a', 'b', 'c'];
stuff.name = "Foo";
var x = document.getElementById("demo");
for (index in stuff) {
    var string = "stuff[" + index + "] = " + stuff[index];
    console.log(string );
    x.innerHTML +=string ;    
}

</script>

score 0 · Answer 4 · answered Jul 26 '16 at 09:30

My educated guess is that you run your code before the DOM has loaded (and more specifically the element with id="demo") so if you open the JavaScript console (F12 in many browsers) you'll see a complaint about x.innerHTML like:

TypeError: x is null

Even if I'm wrong, this code suggests that you aren't really aware of the console and expect to see output on the page itself, something that won't happen:

x.innerHTML = console.log("stuff[" + index + "] = " + stuff[index]);

This is all you should be doing:

console.log("stuff[" + index + "] = ", stuff[index]);

(Please note the additional comma to avoid type casting to string.)

A silly error with looping over the Array

4 Answers4