Don Don - 3 months ago 27
jQuery Question

Looping through Json Array and Object

I'm trying to pull option information from the Edmunds.com API but I'm having issues with trying to cycle through it and display only what I want. Here is the 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
}


So what I want is to list all the "names" and "values" from "attributes"

Here is my code:

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


I thought this would look through the "attributes" array but all it returns is the first item name correctly and the value returns 6 instead of 10 and doesn't print anything else.

I'm not a jQuery/javascript expert by far and I seem to be missing something here and have tried for 3 days and 100's of solutions, but clearly I'm missing something. I'd appreciate any help or feed back in trying to solve this!!

Thanks in advance!

Answer

this should work

var attributes = [].concat.apply([], json.equipment.map(function(v) { return v["attributes"]||[] }));

so, after that you would do your stuff like:

$.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 
});
Comments