使用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?
答案 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)
});