Using a name/value object
{"seasons" : ['Spring','Summer','Fall','Winter']}
<div id="seasonslist2">
<p>
<button onclick="makeSeasonsList();" type="submit">Click to append list of seasons </button>
</p>
</div>
In
script
element within head
element (<script>
):
function makeSeasonsList() {
ul_node = document.createElement("ul");
let mydata= {"seasons":['Spring','Summer','Fall','Winter']}
;
let seasons = mydata.seasons;
for (i in mydata.seasons) {
let mytext = i + " " + seasons[i];
let text_node = document.createTextNode(mytext);
let li_node = document.createElement("li");
li_node.appendChild(text_node);
ul_node.appendChild(li_node);
};
let container = document.getElementById("seasonslist2");
container.appendChild(ul_node);
}