Generating a bullet list from an array of objects

Question

Generating a bullet list from an array of objects

Looking to create an unordered list with vanilla JS, using an array of objects to populate the list. Struggling a bit on how to accomplish this.

Here 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>

Struggling to format my list to look like this:

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

Any tips on accomplishing this using vanilla JS would be appreciated!

javascript list for-loop appendchild createelement

Answer 1

Answer №1

To create a  tag containing item.author, it's recommended to utilize the createElement method.

You can then generate a new text node for item.name by using document.createTextNode.

Finally, attach the textNode to the li element and append it 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 a  tag containing item.author, it's recommended to utilize the createElement method.

You can then generate a new text node for item.name by using document.createTextNode.

Finally, attach the textNode to the li element and append it 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 3

Answer №2

If you need to customize your unordered list, make the necessary changes in the JavaScript code below:

let myList = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" },
  { title: "1984", author: "George Orwell" },
  { title: "Brave New World", author: "Aldous Huxley" },
];

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

for (const item of myList) {
  let liItem = document.createElement("li");
  liItem.textContent = `${item.author}: ${item.title}`;
  ulElement.appendChild(liItem);
}

document.getElementById("listContainer").appendChild(ulElement);

In this updated script, individual list items are created and added to the unordered list element. To display titles in bold format, you can utilize  or 

Answer 4

If you need to customize your unordered list, make the necessary changes in the JavaScript code below:

let myList = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" },
  { title: "1984", author: "George Orwell" },
  { title: "Brave New World", author: "Aldous Huxley" },
];

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

for (const item of myList) {
  let liItem = document.createElement("li");
  liItem.textContent = `${item.author}: ${item.title}`;
  ulElement.appendChild(liItem);
}

document.getElementById("listContainer").appendChild(ulElement);

In this updated script, individual list items are created and added to the unordered list element. To display titles in bold format, you can utilize  or 

Generating a bullet list from an array of objects

Answer №1

Answer №2

Similar questions

Record of Recaptcha actions is not showing up in the reports

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

What is the proper way to incorporate a ref within a class component?

Is forwardRef not explicitly exported by React?

An alternative to PHP's exec function in Node.js

Selenium and Python: Dealing with the ElementNotInteractableException when trying to input a value in a td element

ReactJS input range issue: Cannot preventDefault within a passive event listener invocation

Utilize Vue.js and express.js to distribute HTML files securely

What is the best way to find the maximum and minimum values within a JSON object that is populated from user inputs using only JavaScript?

What is the best way to compare dates in order to obtain the necessary results?

Limit access to route in ExpressJS only to internal redirects

URL Labeler StateProvider: A unique StateProvider that adds a distinctive label to the

What is the best way to use Immer to update Zustand state when incorporating objects that are added through a controlled form using React-Hook-

Retrieve the dynamically generated element ID produced by a for loop and refresh the corresponding div

What exactly is the purpose of utilizing node js and can someone explain to me what constitutes a

Decrease the dimensions of the image while maintaining its width at 100%

Looking to achieve a scroll effect with mix-blend-mode using JavaScript?

Exploring the functionality of Radar Chart within a React component

Having trouble with Angular ngRoute functionality?

Convert the JSON data into the specified format using JavaScript