Create Lists From JSON Data in Javascript (Simple Examples)

Welcome to a quick tutorial on how to create HTML lists from JSON data in Javascript. Want to dynamically generate a list from JSON data?

That should cover the basics, but read on for more examples!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/create-lists-from-json-data-in-javascript/” title=”Create Lists From JSON Data in Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

 

TABLE OF CONTENTS

 

 

 

1) CREATE ELEMENT

<!-- (A) DIV CONTAINER -->
<div id="demoA"></div>

 <!-- (B) JAVASCRIPT -->
<script>
// (B1) JSON STRING TO ARRAY
var data = '["Red","Green","Blue"]';
data = JSON.parse(data);

// (B2) CREATE LIST
var list = document.createElement("ol");
for (let i of data) {
  let item = document.createElement("li");
  item.innerHTML = i;
  list.appendChild(item);
}

// (B3) APPEND LIST TO CONTAINER
document.getElementById("demoA").appendChild(list);
</script>

This is the “full version” of the snippet in the introduction, and it should be pretty self-explanatory:

• We use JSON.parse() to turn the JSON string back into an array.
• Create the HTML list using document.createElement("ol").
• Then loop through the array, append the list items – for (let i of data) { ... document.createElement("li") ... }.
• Lastly, add the list to where it is required – document.getElementById(TARGET).appendChild(list).

 

 

2) MANUAL HTML STRING

<!-- (A) DIV CONTAINER -->
<div id="demoB"></div>
 
<!-- (B) JAVASCRIPT -->
<script>
// (B1) JSON STRING TO ARRAY
var data = '["Red","Green","Blue"]';
data = JSON.parse(data);
 
// (B2) CREATE LIST
var list = "<ul>";
for (let i of data) {
  list += `<li>${i}</li>`;
}
list += "</ul>";

// (B3) APPEND LIST TO CONTAINER
document.getElementById("demoB").innerHTML = list;
</script>

Don’t like the “object-oriented” way of using createElement() and appendChild()? This is an alternative, where we create an HTML string instead.

 

 

3) NESTED OBJECTS & LISTS

<!-- (A) DIV CONTAINER -->
<div id="demoC"></div>
 
<!-- (B) JAVASCRIPT -->
<script>
// (B1) JSON STRING TO OBJECT
var data = '{"Fruits":["Durian","Elderberries","Feijoa"],"Vegetables":["Corn","Daikon","Eggplant"]}';
data = JSON.parse(data);
 
// (B2) CREATE LIST
var list = document.createElement("ul");
for (let i in data) {
  // (B2-1) LIST ITEM
  let item = document.createElement("li");
  list.appendChild(item);
 
  // (B2-2) SUB-SECTION TITLE
  let head = document.createElement("strong");
  head.innerHTML = i;
  item.appendChild(head);
 
  // (B2-3) SUB-SECTION ITEMS
  let sublist = document.createElement("ul");
  item.appendChild(sublist);
  for (let j of data[i]) {
    let subitem = document.createElement("li");
    subitem.innerHTML = j;
    sublist.appendChild(subitem);
  }
}
 
// (B3) APPEND LIST TO CONTAINER
document.getElementById("demoC").appendChild(list);
</script>

Lastly, what if we have a nested object? Keep calm and look carefully, we are pretty much doing the same. Parse the JSON data into an object, then loop through the nested object to create a nested list.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

LINKS & REFERENCES

• How to Create Tables From JSON Data in Javascript – Code Boxx

 

INFOGRAPHIC CHEAT SHEET