迭代嵌套的JSON对象

时间:2017-01-30 17:42:17

标签: javascript jquery json django-rest-framework

使用Edmunds API(edmunds.mashery.io),我试图解析一个汽车对象。
正如您所看到的,JSON Response已完全格式化为以下嵌套树: Make(id,name,models) - >模特(id,name,nicename,styles) - >样式

考虑到这一点,请考虑以下API响应:

{
"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"
            }
       }
}  

使用JQuery' ajax,我可以加载JSON响应。我正在尝试基于Model的id创建动态按钮(每个模型都是一个盒装容器,其中包含有关从此响应中填充的模型的信息。

我目前的问题是,当我尝试迭代JQuery的时候,我得到:
关键:模型
value:[Object] [Object] ... [Object]

我想要完成的是以动态方式访问对象的内容并填充以填充它。

除了这个问题的范围之外,我还有一个基于BIG图片的更一般的问题:

使用Edmund的API我计划使用按钮制作汽车选择网站,其中:
状态1:填充,当选择make时,进入状态2 状态2:模型按钮从JSON API填充,移至状态3.

这是我当前的jQuery函数:

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

  });

这是我的输出:

  

2系列

如果我将模型[0]更改为模型[3],结果会发生变化(应该如此)。 如何在我可以使用HTML操作的数组中获取model [x] .name?

2 个答案:

答案 0 :(得分:1)

也许这样的事情会有所帮助。

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>

答案 1 :(得分:0)

我正在寻找这样的代码段:

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