Javascript 在Json数组和对象之间循环

我正试图从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");           
}});
}   

功能选项音频（styleID）{
$.ajax({
url:“https://api.edmunds.com/api/vehicle/v2/styles/“+styleID+”/equipment？availability=standard&equipmentType=AUDIO\u SYSTEM&fmt=json&api\u key=“，//使用传递的变量设置URL中的styleID号
//强制将其作为文本处理
数据类型：“文本”，
成功：功能（数据）{
var json=json.parse（数据）；
var element=document.querySelector（“trix编辑器”）；//获取trix编辑器实例并设置为element
element.editor.insertHTML（“音频选项””；
$.each（json.equipment，函数（索引，值）{//遍历数组
element.editor.insertHTML（“
”+json.equipment[0]。属性[0]。名称+”：“+json.equipment[0]。属性[0]。值+”
/ul>”；
element.editor.insertLineBreak（）；//创建新行
});
element.editor.deleteInDirection（“向后”）；
}});
}   

我认为这将检查“attributes”数组，但它返回的只是正确的第一个项目名称，值返回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 
});

$。每个（属性、函数（索引、值）{//遍历数组
element.editor.insertHTML（“
”+value.name+”：“+value.value+”
”；
element.editor.insertLineBreak（）；//创建新行
});

这应该行得通

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 
});

$。每个（属性、函数（索引、值）{//遍历数组
element.editor.insertHTML（“
”+value.name+”：“+value.value+”
”；
element.editor.insertLineBreak（）；//创建新行
});

请注意，涉及到两个数组：

设备

和

属性

。因此，您可以对它们进行迭代

对于插入HTML，我建议首先收集变量中的HTML片段，然后使用

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>");

---

这将以列表的形式显示设备，给出其名称和类型，每个设备都有一个嵌套的缩进列表，其中包含属性。

请注意，其中包括两个数组：

设备

和

属性

。因此，您可以对它们进行迭代

对于插入HTML，我建议首先收集变量中的HTML片段，然后使用

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>");

---

这将以列表的形式显示设备，给出其名称和类型，并且每个设备都有一个带有属性的嵌套缩进列表。

而不是访问

json.equipment[0]

，请查看

value

value

应该有一个属性，

attributes

，您可以对其进行迭代。jQuery是用于DOM的。使用并映射一个将DOM变异为原始数组中每个元素的函数。@RishatMuhametshin在$中。each（）函数与$（selector）不同。each（）用于以独占方式在jQuery对象上迭代，而不是访问

json.device[0]

，请查看

value

value

应该有一个属性，

attributes

，您可以对其进行迭代。jQuery是用于DOM的。使用一个将DOM变异的函数并将其映射到原始数组中的每个元素。@RishatMuhametshin$中。each（）函数与$（selector）不同。each（）用于以独占方式在jQuery对象上迭代-我下一步将尝试！！如果你有时间，你能解释一下它是如何工作的，通过阅读它看起来很简单，但是我想确保我不仅能工作，而且能理解为什么，谢谢你的快速回复！第一个代码只是将

json.equipment[N].attribures

中的每个对象分组，在变量

attributes

中使用，第二个代码迭代该属性数组。这很好，也可用于所有API调用！非常感谢。谢谢你的解释，这个答案是最灵活的，所以我选择了它。下一步我会试试！！如果你有时间，你能解释一下它是如何工作的，通过阅读它看起来很简单，但是我想确保我不仅能工作，而且能理解为什么，谢谢你的快速回复！第一个代码只是将

json.equipment[N].attribures

中的每个对象分组，在变量

attributes

中使用，第二个代码迭代该属性数组。这很好，也可用于所有API调用！非常感谢。谢谢你的解释，这个答案是最灵活的，所以我选择了它。这个答案也很有效，但选择的答案提供了更广泛的灵活性，但我给你打了个勾，因为它不允许我选择两个答案。也感谢您的快速响应和代码！另一个注意事项是，

标记只能执行一次，但由于某些原因，在写入“twix编辑器”时它不起作用，因此我发现如果我将
• 写入每个项目中。所以，如果有人发现了这一点，它有帮助，太好了！也许trix编辑器会接受整个<