javascript array to html <li>

Question

I got an array from json and I need to put each item in a <li> on my html

something like this :

names : {john, paul, ringo,george}
into <li>john</li>..

my code:

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

script:

function onLocationsReceived(data) {
  console.log("recievd");

  for (var i = 0; i < data[0].Sensors.length; i++) {
    var sensorNames = data[0].Sensors[i].Name;
    document.getElementById("demo").innerHTML = sensorNames;
    console.log(sensorNames);
  }
}

on the concole.log it prints just fine..

document.getElementById("demo").innerHTML = '<li>' + sensorNames '</li>

something like that???

As per your code you are overwriting the text in your inner html — LearningPhase
– LearningPhase, Commented Apr 6, 2016 at 10:56
Possible duplicate of Printing each value of an array on a separate line Javascript — Tigger
– Tigger, Commented Apr 6, 2016 at 10:56
I suggest to create temporary string variable for <li> elements, and then after building it - to write it as .innerHTML. Instead of doing +=. It's better for performance and easily to maintain — Nikita Kurtin
– Nikita Kurtin, Commented Apr 6, 2016 at 11:00

Nikita Kurtin · Accepted Answer · 2016-04-06 11:22:16Z

1

Using something like below

function onLocationsReceived(data){
var html="";
  for (var i = 0; i < data[0].Sensors.length; i++) {
   var sensorNames = data[0].Sensors[i].Name;
    html+="<li>"+sensorNames+"</li>";
    console.log(sensorNames);
}
document.getElementById("demo").innerHTML=html;
}

edited Apr 6, 2016 at 11:22

Nikita Kurtin

6,2454 gold badges48 silver badges49 bronze badges

answered Apr 6, 2016 at 11:02

LearningPhase

1,2871 gold badge12 silver badges20 bronze badges

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

1 Comment

LearningPhase Over a year ago

Can someone please edit my answer not able to do that

Georgios · Accepted Answer · 2016-04-06 11:43:38Z

1

You can use syntax below

document.getElementById('demo').innerHTML ='<li>' + sensorNames + '</li>'

edited Apr 6, 2016 at 11:43

Georgios

20.2k9 gold badges99 silver badges100 bronze badges

answered Apr 6, 2016 at 10:58

krishna

5182 silver badges8 bronze badges

1 Comment

Nikita Kurtin Over a year ago

See my previous comment about the += and put the: you can use below syntax inside a comment line - to make it more copy pastable

Marc · Accepted Answer · 2016-04-06 11:13:36Z

0

You should cache the iterative sensorNames into a var with the li and then replace the innerHTML:

var content = "",
    sensorNames;

for (var i = 0; i < data[0].Sensors.length; i++) {
    sensorNames = data[0].Sensors[i].Name;
    content += "<li>" + sensorNames + "</li>";
}

document.getElementById("demo").innerHTML = content;

answered Apr 6, 2016 at 11:13

Marc

1091 silver badge3 bronze badges

Collectives™ on Stack Overflow

javascript array to html <li>

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related