[英]Looping through Json Array and Object
我正在尝试从Edmunds.com API中提取选项信息,但是在尝试循环浏览并仅显示所需内容时遇到了问题。 这是JSON
{
"equipment": [{
"id": "200477525",
"name": "Premium",
"equipmentType": "AUDIO_SYSTEM",
"availability": "STANDARD",
"attributes": [{
"name": "Total Number Of Speakers",
"value": "10"
}, {
"name": "Digital Audio Input",
"value": "USB with external media control"
}, {
"name": "Memory Card Slot",
"value": "memory card slot"
}, {
"name": "Antenna Type",
"value": "diversity"
}, {
"name": "Cd Player",
"value": "single CD player"
}, {
"name": "Cd Mp3 Playback",
"value": "CD MP3 Playback"
}, {
"name": "Speed Sensitive Volume Control",
"value": "speed sensitive volume control"
}, {
"name": "Usb Connection",
"value": "USB connection"
}, {
"name": "Radio Data System",
"value": "radio data system"
}, {
"name": "Radio",
"value": "AM/FM"
}, {
"name": "Satellite Radio",
"value": "satellite radio"
}, {
"name": "Months Of Provided Satellite Radio Service",
"value": "3"
}]
}],
"equipmentCount": 1
}
所以我要列出“属性”中的所有“名称”和“值”
这是我的代码:
function OptionsAudio(styleID){
$.ajax({
url: "https://api.edmunds.com/api/vehicle/v2/styles/" + styleID + "/equipment?availability=standard&equipmentType=AUDIO_SYSTEM&fmt=json&api_key=<%= ENV["EDMUNDS_API_KEY"] %>",// setting styleID number in URL with passed variable
//force to handle it as text
dataType: "text",
success: function(data) {
var json = JSON.parse(data);
var element = document.querySelector("trix-editor"); // get the trix-editor instance and set to element
element.editor.insertHTML("<strong>Audio Options</strong>");
$.each(json.equipment, function(index, value){ // iterate though the array
element.editor.insertHTML("<ul><li>" + json.equipment[0].attributes[0].name + " : " + json.equipment[0].attributes[0].value + "</li></ul>");
element.editor.insertLineBreak(); // creates a new line
});
element.editor.deleteInDirection("backward");
}});
}
我以为这会通过“属性”数组进行查找,但它返回的只是正确的第一个项目名称,并且该值返回6而不是10,并且不会打印其他任何内容。
我到目前为止还不是jQuery / javascript专家,我似乎在这里丢失了一些东西,并尝试了3天和100多个解决方案,但是显然我缺少了一些东西。 我将不胜感激,也乐意为您解决此问题提供反馈!!
提前致谢!
这应该工作
var attributes = [].concat.apply([], json.equipment.map(function(v) { return v["attributes"]||[] }));
因此,之后您将执行以下操作:
$.each(attributes, function(index, value){ // iterate through the array
element.editor.insertHTML("<ul><li>" + value.name + " : " + value.value + "</li></ul>");
element.editor.insertLineBreak(); // creates a new line
});
请注意,涉及两个数组: equipment
和attributes
。 这样您就可以遍历两个对象。
对于插入HTML,我建议首先将HTML片段收集到一个变量中,然后与insertHTML
一起insertHTML
。 这样,HTML是一致的,并且您只能创建一个ul
,而不是创建与li
一样多的ul
。
var html = [];
json.equipment.forEach(function(equipment){ // iterate through first array
equipment.attributes.forEach(function(attribute){ // iterate through second array
html.push("<li>" + attribute.name + " : " + attribute.value + "</li>");
});
});
element.editor.insertHTML("<ul>" + html.join('\n') + "</ul>");
我使用了forEach
而不是jQuery $.each
。
您可能想为外循环的每次迭代插入一些其他HTML,或者将所有属性都列在一个列表中,而无需区分它们的用途。
也许是这样的:
var html = json.equipment.map(function(equipment){ // iterate through first array
var subhtml = equipment.attributes.map(function(attribute){ // iterate through second array
return "\n<li>" + attribute.name + " : " + attribute.value + "</li>";
});
return "\n<li>" + equipment.name + " : " + equipment.equipmentType
+ "<ul>" + subhtml.join('') + "</ul></li>";
});
element.editor.insertHTML("<ul>" + html.join('\n') + "</ul>");
它将以列表形式显示设备,并提供其名称和类型,并且每个设备都有一个嵌套的缩进列表及其属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.