printing list of objects as links in vanilla javascript

Question

I am trying to print a list of objects using vanilla javascript. In my loop, only the last item is getting printed. How do I fix this? I tried appending each li to a variable (node) and then append it to my ul id but that did not work. Here is the fiddle:

https://codepen.io/anon/pen/LLgZzw?editors=1011

HTML

<ul id="list"></ul>

JS

let list = document.getElementById('list');

let obj = {
  "codepen": 'www.codepen.io',
  "jsfiddle": 'www.jsfiddle.com',
  "jsbin": 'www.jsbin.com'
};
function printList(obj){
  for(let key in obj){
    console.log(key);
    list.innerHTML = `<li><a href= ${obj[key]}>${key}</a></li>`;
  }
  //list.appendChild(li);
}
printList(obj);

You need to concatenate your string here list.innerHTML += <li><a href= ${obj[key]}>${key}</a></li>; using += — Mr. Alien
– Mr. Alien, Commented Jul 8, 2017 at 16:41

brk · Accepted Answer · 2017-07-08 16:42:28Z

2

You need to concat value to innerHTML.In your case it is always the last value of the iteration that will be set in innerHTML

let list = document.getElementById('list');

let obj = {
  "codepen": 'www.codepen.io',
  "jsfiddle": 'www.jsfiddle.com',
  "jsbin": 'www.jsbin.com'
};

function printList(obj) {
  for (let key in obj) {
    console.log(key);
    //Changed here. added + before ==.It will concat the current value with previous value
    list.innerHTML += `<li><a href= ${obj[key]}>${key}</a></li>`;
  }
  //list.appendChild(li);
}
printList(obj);

<ul id="list"></ul>

edited Jul 8, 2017 at 16:42

answered Jul 8, 2017 at 16:40

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

1 Comment

theusual Over a year ago

exactly what I needed! Thanks a lot @brk

Collectives™ on Stack Overflow

printing list of objects as links in vanilla javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related