How to Populate Data into HTML Using the for…of Loop in Pure JavaScript?

Estimated read time 1 min read

Here’s an example of populating data into an HTML list using the for...of loop in pure JavaScript:

<ul id="dataList"></ul>

<script>
  const data = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Jim", age: 35 }
  ];
  
  const list = document.querySelector("#dataList");
  
  for (const item of data) {
    const listItem = document.createElement("li");
    listItem.textContent = `Name: ${item.name}, Age: ${item.age}`;
    list.appendChild(listItem);
  }
</script>

This will generate a list with three items, each containing the name and age of a person from the data array.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply