With vanilla JS, you can loop through the array with the forEach method and construct the li elements accordingly.
var data = {
"gists": [
{
"name": "Get the title",
"id": "beaf8a106e76f4bb82a85ca3a7707a78",
"category": "Function"
},
{
"name": "Get the content",
"id": "c6ae7c55aa27f8b6dbeb15f5d72762ec",
"category": "Uncategorized"
}
]
};
var container = document.querySelector('#container');
var ul = document.createElement('ul');
data.gists.forEach(function (item) {
var li = document.createElement('li');
li.textContent="Name: " + item.name + ', ID: ' + item.id + ', Function: ' + item.category;
ul.appendChild(li);
});
container.appendChild(ul);
<div id="container"></div>
solved How to foreach JSON to HTML ul li [duplicate]