遍历嵌套的JSON对象

Question

Using Edmunds API (edmunds.mashery.io), I am trying to parse a car object.
As you can see the JSON Response is well formatted into the following nested tree: Make (id, name, models) --> Models (id, name, nicename, styles) --> Styles

With this in mind, consider the following API response:

{
"name": "BMW",
"model": [
    {
        "id": "BMW_2_Series",
        "name": "2 Series",
        "nicename": "2-series",
        "styles": [
            {
                "id": 200744428,
                "name": "228i 2dr Coupe (2.0L 4cyl Turbo 6M)",
                "drivenwheels": "rear wheel drive",
                "numofdoors": 2,
                "manufacturercode": "162A",
                "engine": 200744477,
                "transmission": 200744479,
                "trim": "228i",
                "pricebasemsrp": "32850.0",
                "pricebaseinvoice": "30720.0",
                "pricedeliverycharges": "995.0",
                "submodelbody": "Coupe",
                "submodelname": "2 Series Coupe",
                "submodelnicename": "coupe",
                "mpghighway": "34",
                "mpgcity": "22",
                "categoriesmarket": "Luxury,Performance",
                "epaclass": "Subcompact Cars",
                "vehiclesize": "Compact",
                "crossover": "NA",
                "primarybodytype": "Car"
            },
            {
                "id": 200744429,
                "name": "228i SULEV 2dr Coupe (2.0L 4cyl Turbo 8A)",
                "drivenwheels": "rear wheel drive",
                "numofdoors": 2,
                "manufacturercode": "162B",
                "engine": 200744475,
                "transmission": 200744478,
                "trim": "228i SULEV",
                "pricebasemsrp": "32850.0",
                "pricebaseinvoice": "30720.0",
                "pricedeliverycharges": "995.0",
                "submodelbody": "Coupe",
                "submodelname": "2 Series Coupe",
                "submodelnicename": "coupe",
                "mpghighway": "35",
                "mpgcity": "23",
                "categoriesmarket": "Luxury,Performance",
                "epaclass": "Subcompact Cars",
                "vehiclesize": "Compact",
                "crossover": "NA",
                "primarybodytype": "Car"
            }]},
    {
        "id": "BMW_3_Series",
        "name": "3 Series",
        "nicename": "3-series",
        "styles": [
            {
                "id": 200729833,
                "name": "320i 4dr Sedan (2.0L 4cyl Turbo 8A)",
                "drivenwheels": "rear wheel drive",
                "numofdoors": 4,
                "manufacturercode": "16TI",
                "engine": 200741606,
                "transmission": 200741614,
                "trim": "320i",
                "pricebasemsrp": "33150.0",
                "pricebaseinvoice": "31000.0",
                "pricedeliverycharges": "995.0",
                "submodelbody": "Sedan",
                "submodelname": "3 Series Sedan",
                "submodelnicename": "sedan",
                "mpghighway": "36",
                "mpgcity": "24",
                "categoriesmarket": "Luxury",
                "epaclass": "Compact Cars",
                "vehiclesize": "Midsize",
                "crossover": "NA",
                "primarybodytype": "Car"
            }
       }
}  

Using JQuery's ajax, I am able to load the JSON response. I am trying to create dynamic buttons based on the Model's id (Each model is a boxed container containing information about the model populated from this response.

My current issue stands that when I try to iterate JQuery's .each, I get:
key: model
value: [Object] [Object] ... [Object]

What I'm trying to accomplish is accessing the Object's content in a dynamic way and populate to populate it.

In addition to the scope of this question, I have a more general question based on the BIG Picture:

Using Edmund's API I plan on making a car selection website using buttons where:
State 1: Makes populated, when make is selected, go to state 2.
State 2: Model buttons are populated from JSON API, move to state 3.

Here is my current jQuery function:

$.getJSON('http://127.0.0.1:8000/makes/200000081.json', function( models ) {
      console.log(models.model[0].name)

  });

Here is my output:

2 Series

If I change model[0] to model[3] the result changes (as it should.) How can I get model[x].name in an array I can manipulate with HTML?

Answer 1

Maybe something like this could help.

 var response = { "name": "BMW", "model": [ { "id": "BMW_2_Series", "name": "2 Series", "nicename": "2-series", "styles": [ { "id": 200744428, "name": "228i 2dr Coupe (2.0L 4cyl Turbo 6M)", "drivenwheels": "rear wheel drive", "numofdoors": 2, "manufacturercode": "162A", "engine": 200744477, "transmission": 200744479, "trim": "228i", "pricebasemsrp": "32850.0", "pricebaseinvoice": "30720.0", "pricedeliverycharges": "995.0", "submodelbody": "Coupe", "submodelname": "2 Series Coupe", "submodelnicename": "coupe", "mpghighway": "34", "mpgcity": "22", "categoriesmarket": "Luxury,Performance", "epaclass": "Subcompact Cars", "vehiclesize": "Compact", "crossover": "NA", "primarybodytype": "Car" }, { "id": 200744429, "name": "228i SULEV 2dr Coupe (2.0L 4cyl Turbo 8A)", "drivenwheels": "rear wheel drive", "numofdoors": 2, "manufacturercode": "162B", "engine": 200744475, "transmission": 200744478, "trim": "228i SULEV", "pricebasemsrp": "32850.0", "pricebaseinvoice": "30720.0", "pricedeliverycharges": "995.0", "submodelbody": "Coupe", "submodelname": "2 Series Coupe", "submodelnicename": "coupe", "mpghighway": "35", "mpgcity": "23", "categoriesmarket": "Luxury,Performance", "epaclass": "Subcompact Cars", "vehiclesize": "Compact", "crossover": "NA", "primarybodytype": "Car" }]}, { "id": "BMW_3_Series", "name": "3 Series", "nicename": "3-series", "styles": [ { "id": 200729833, "name": "320i 4dr Sedan (2.0L 4cyl Turbo 8A)", "drivenwheels": "rear wheel drive", "numofdoors": 4, "manufacturercode": "16TI", "engine": 200741606, "transmission": 200741614, "trim": "320i", "pricebasemsrp": "33150.0", "pricebaseinvoice": "31000.0", "pricedeliverycharges": "995.0", "submodelbody": "Sedan", "submodelname": "3 Series Sedan", "submodelnicename": "sedan", "mpghighway": "36", "mpgcity": "24", "categoriesmarket": "Luxury", "epaclass": "Compact Cars", "vehiclesize": "Midsize", "crossover": "NA", "primarybodytype": "Car" } ] } ] } var model = response.model; var brandname = response.name; $(model).each(function(){ var series = $(this).get(0); $("#view").append("<button id=\\""+series.id+"\\" name=\\""+series.id+"\\">"+brandname+" "+series.name+"</button>"); $(document).on("click","#"+series.id,function() { $(series.styles).each(function(){ var make = $(this).get(0); if($("#"+make.id).length<=0) { $("#subview").append("<button id=\\""+make.id+"\\" name=\\""+make.id+"\\">"+make.name+"</button>"); } else { $("#"+make.id).remove(); } $(document).on("click","#"+make.id,function() { var carinfo = ""; for (var prop in make) { carinfo += prop+' = '+make[prop]+"\\n"; } alert(carinfo); }); }); }); }); 

 #view button,#subview button{ width:100%; display:block; padding:2rem; } #view button { color:#fff; background-color:#326d1a; } #subview button{ color:#fff; background-color:#a22fa1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="view"></div> <div id="subview"></div> 

Answer 2

I was looking for a code snippet like this:

$.getJSON('http://127.0.0.1:8000/makes/' + make_id + '.json', function( models     ) {
       $(models.model).each(function(){
           console.log(this.name + ' ' + this.id)
       });