-3

whats wrong with this code? when i click on button it shows undefined before first array value:

function loadDoc() {
  var x;
  var edare = JSON.parse('{"names":["ali", "mansour", "taghi"]}');
  for (var i in edare.names) {
    x += edare.names[i] + "<br>";
    document.getElementById("demo").innerHTML = x;
  }
}
<input type="button" onclick="loadDoc();" value="test">
<p id="demo"></p>
Andreas
  • 21,535
  • 7
  • 47
  • 56
Navid M
  • 51
  • 2
  • 7

4 Answers4

2

Because your x variable's initial value is undefined. So when you try to concatenate with another string it does undefined + string.

To fix this, you should give an initialize value to your variable:

var x = "";

Also, you should use for loops instead of for...in for arrays. Take a look at this for more information.

And finally, should also move your .innerHTML = x; outside of the loop to prevent updating the DOM on every iteration.

var x = "";
var edare = JSON.parse('{"names":["ali", "mansour", "taghi"]}');

for (var i=0; i<edare.names.length; i++) {
    x += edare.names[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;
Chin Leung
  • 14,621
  • 3
  • 34
  • 58
  • And to not change the DOM for every element in the array move the line with `.innerHTML = x` after the loop (and `for ( ... in ...)` is for objects, `for (...; ...; ...)` for arrays) – Andreas Nov 09 '17 at 19:59
  • "And finally, should also move your .innerHTML = x; outside of the loop to prevent updating the DOM on every iteration.' This is especially important, as every update to the DOM is extremely expensive. If there's a few hundred items in the array, this can cause numerous seconds of end user lag while the DOM is being written out. – user2366842 Nov 09 '17 at 23:35
0

Iterate your array properly:

var i, nameConcat = "";
for(i=0; i < edare.names.length; i++){
    nameConcat += edare.names[i] + "<br>";
}
document.getElementById("demo").innerHTML = nameConcat;

Or:

var concatNames = "";
edare.names.forEach(function(name){
    nameConcat += name + "<br>";
});
document.getElementById("demo").innerHTML = nameConcat;
zero298
  • 25,467
  • 10
  • 75
  • 100
  • @NavidM: This doesn't actually work. It's ultimately going to have only the last value in the list. –  Nov 09 '17 at 20:13
  • @rockstar You're right, fixed to match what OP output. – zero298 Nov 09 '17 at 20:17
  • This also has the same issue as the original code because you didn't initialize `nameConcat` to an empty string. You'll also want to fix your second example where you forgot to change `edare.names[i]` to `name`. Lastly, the quotation marks for your `br` tag are inside the angle brackets instead of outside. –  Nov 09 '17 at 23:21
  • ...the `
    ` should also be in the loop. I submitted an edit to fix the issues.     –  Nov 09 '17 at 23:25
0

Use .reduce() to construct a single string from the array of strings.

That way you only need to set the .innerHTML once.

function loadDoc() {
  const edare = JSON.parse('{"names":["ali", "mansour", "taghi"]}');

  document.getElementById("demo").innerHTML = edare.names.reduce((s, itm) =>
    s + itm + "<br>"
  , "")
}
<input type="button" onclick="loadDoc();" value="test">
<p id="demo"></p>

Or just .join() the list.

function loadDoc() {
  const edare = JSON.parse('{"names":["ali", "mansour", "taghi"]}');

  document.getElementById("demo").innerHTML = edare.names.join("<br>");
}
<input type="button" onclick="loadDoc();" value="test">
<p id="demo"></p>

Only difference here is that there's no trailing <br> at the end, but you can easily add that in if you really want it.

0

but it works with this:

function loadDoc() {
var x="";
var edare = JSON.parse ('{"names":["ali", "mansour", "taghi"]}');
for (var i in edare.names) {
    x += edare.names[i] + "<br>";
    document.getElementById("demo").innerHTML = x;
  }
}
Navid M
  • 51
  • 2
  • 7