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

Changing Text in React Native is Customizable

Tips for updating an Observable array in Angular 4 using RxJS

Highcharts 3D Pie Chart with Drilldown Feature

Add a click event listener to the body element using a button click, without causing it to trigger

showing the data in a textbox using AJAX retrieved information

Retrieve the AngularJS scope object by using an alternate scope object as the identifier

Store data in Firebase Storage and retrieve the link to include it in Realtime Database

Exploring the intricacies of Knockout JS mapping nested models using fromJS function

The div structure generated through JavaScript appears distinct from its representation in the live DOM

Guide to generating a PDF file and utilizing a Node.js program for the download process

Utilizing the jQuery slideToggle method on the specified target element

Error: The function is not defined on this.props during the handleCHange event

Streamlining the process of implementing click events on elements selected by class using jQuery

Obtain the date in ISO format without subtracting the timezone offset

When Using TypeScript with Serverless, 'this' Becomes Undefined When Private Methods are Called from Public Methods

Guide to creating dynamic borders around your PHPexcel output

Enhance your JavaScript skills by deserializing objects and seamlessly integrating new methods

Encountering an issue when attempting to downgrade React Native version from 0.51 to 0.45

The unusual behavior of the :to attribute on @click in Vue

What is the proper method for submitting a mail form via AJAX without using jQuery?