Question 216564 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Create Unordered List from Object of arrays

I want to create an unordered list using vanilla JS to create a list from an array of objects. Not sure how to do that.

This is my current code:

let myObj = [
  {name: "Harry Potter", author: "JK Rowling"},
  {name: "Hunger Games", author: "Suzanne Collins"},
  {name: "Lord of the Rings", author: "J. R. R. Tolkien"},
  {name: "Game of Thrones", author: "George R.R. Martin"},
  {name: "Percy Jackson", author: "Rick Riordan"},
];

console.log(myObj);

let myUL = document.createElement("UL");
myUL.setAttribute("id", "myUL");
document.getElementById("myDiv").appendChild(myUL);
for (const item of myObj) {
   document
   .getElementById("myUL")
   .appendChild(document.createElement("LI"));
}
<div id="myDiv"></div>

Not sure how to make my list look like:

  • JK Rowling: Harry Potter
  • Suzanne Collins: Hunger Games
  • J. R. R. Tolkien: Lord of the Rings
  • George R.R. Martin: Game of Thrones
  • Rick Riordan: Percy Jackson

Using vanilla JS

Tags:

2

Answers


  1. 0

    You should use createElement to create a <strong> tag in which you place item.author.

    Then make a new text node for the item.name using document.createTextNode

    Then append the textNode to the li and append that to the ul:

    const myObj = [
  {name: "Harry Potter", author: "JK Rowling"},
  {name: "Hunger Games", author: "Suzanne Collins"},
  {name: "Lord of the Rings", author: "J. R. R. Tolkien"},
  {name: "Game of Thrones", author: "George R.R. Martin"},
  {name: "Percy Jackson", author: "Rick Riordan"},
];

const myUL = document.createElement("UL");
myUL.setAttribute("id", "myUL");

const ul = document.getElementById("myDiv").appendChild(myUL);

for (const item of myObj) {
    let author = document.createElement("strong");
    author. textContent = item.author + ': ';
    
    let li = document.createElement("li");    
    li.appendChild(author);
    li.appendChild(document.createTextNode(item.name))
    
    ul.appendChild(li);
}
    <div id="myDiv"></div>
    Login or Signup to reply.
  2. 0

    To create your desired unordered list update the js as follows:

    let myObj = [
  { name: "Harry Potter", author: "JK Rowling" },
  { name: "Hunger Games", author: "Suzanne Collins" },
  { name: "Lord of the Rings", author: "J. R. R. Tolkien" },
  { name: "Game of Thrones", author: "George R.R. Martin" },
  { name: "Percy Jackson", author: "Rick Riordan" },
];

let myUL = document.createElement("ul");
myUL.setAttribute("id", "myUL");

for (const item of myObj) {
  let listItem = document.createElement("li");
  listItem.textContent = `${item.author}: ${item.name}`;
  myUL.appendChild(listItem);
}

document.getElementById("myDiv").appendChild(myUL);

    In the modified code, created a li element then append it with ul element. If you want the name should be in bold you can use <strong> or <b>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search