Create Unordered List from Object of arrays

Question

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

Answer 1

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>

Answer 2

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>