I am having issues looping through a nested JavaScript array and need some help. I am trying to return a set of list items with both the property name and the value, but it's returning as undefined. Any help would be much appreciated as this is an important project.
JavaScript
$.getJSON("item-data.json", function(results) {
$.each(results.CatalogEntryView, function(index, item) {
console.dir(item.ItemDescription[0].features);
document.getElementById("productHighlightsList").innerHTML = item.ItemDescription[0].features.forEach(enumerateProperties)
function enumerateProperties(key, val)
{
return "<li>" + key + val + "</li>"
}
});
});
The console output from console.dir(item.ItemDescription[0].features);
can be seen below and shows the nested data structure I am trying to access:
Since you're using jQuery, you can just use each again for that nested array:
$.getJSON("item-data.json", function(results) {
$.each(results.CatalogEntryView, function(index, item) {
$.each(item.ItemDescription[0].features, function(k,v){
$("#productHighlightsList").append("<li>" + k + v + "</li>");
});
});
});
So that we can test this, we must pretent we have your json:
var results = {
'CatalogEntryView': [
{
'ItemDescription': [
{
'features': {
'0': '<strong>A</strong>',
'1': '<strong>B</strong>',
'2': '<strong>C</strong>',
'3': '<strong>D</strong>',
'4': '<strong>E</strong>',
'5': '<strong>F</strong>',
'6': '<strong>G</strong>'
}
}
]
}
]
};
$.each(results.CatalogEntryView, function(index, item) {
$.each(item.ItemDescription[0].features, function(k,v){
$("#productHighlightsList").append("<li>" + k + v + "</li>");
});
});
Working test on CodePen: https://codepen.io/skunkbad/pen/OjoBNb
Array.forEach
function does not accumulate the array elements. You could use Array.reduce
function to append all list items, and Array.map
to wrap <li>
tags around each of the items:
$.getJSON("item-data.json", function(results) {
$.each(results.CatalogEntryView, function(index, item) {
console.dir(item.ItemDescription[0].features);
document.getElementById("productHighlightsList").innerHTML = item.ItemDescription[0].features.map(function(item){
return "<li>" + item + "</li>";
}).reduce(function(accumulator , item) {
return accumulator + item;
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.