CODEWITHSUNDEEP
javascriptarrays
user2174295
user2174295

Reputation:

javascript - Array values in <li></li>

How can i display my array values in <li></li>

My code :

HTML

<ul id="navp">
<li></li>
<li></li>
<li></li>
</ul>

JS

    var myList = [ 
    ['1','one'],
    ['1','two'],
    ['1','three'],
    ];
for (var tok in myList) { console.log(tok, myList[tok][1]); }

I want to display one, two, three in list (<li></li>).

Upvotes: 2

Views: 5389

Answers (3)

Nikita S
Nikita S

Reputation: 137

you can use like, dynamically depend on length of array push li tags

const emailList = [];
data.invalidEmailIds.forEach((email) => {
 emailList.push("<li>" + email + "</li>");
});

In html , just you can use {{emailList}}

Upvotes: 0

Khanh Tran
Khanh Tran

Reputation: 447

With HTML:

<ul id="navp">
</ul>

Try these JS codes:

var myList = [ 
    ['1','one'],
    ['1','two'],
    ['1','three'],
    ];

var mainList = document.getElementById("navp");

for(var i=0;i<myList.length;i++){
         var item = myList[i];
         var elem = document.createElement("li");
         elem.value=item[0];
         elem.innerHTML=item[1];

         mainList.appendChild(elem);
    }

jsfiddle link

Upvotes: 1

VisioN
VisioN

Reputation: 145398

One possible way:

var li = document.getElementById("navp").getElementsByTagName("li");
for (var i = 0, len = li.length; i < len; i++) {
    li[i].innerHTML = myList[i][1];
}

Another way is to use modern querySelectorAll:

var li = document.querySelectorAll("#navp > li");
for (var i = 0, len = li.length; i < len; i++) {
    li[i].innerHTML = myList[i][1];
}

Upvotes: 4

Related Questions