[英]How to access JSON Nested arrays with jquery
我正在尝试访问下拉菜单中的所有品牌和值,但我不能用这种方式。
<select id="secim">
</select>
var data = [
{
"products": "Cars",
"brands_values" : [
{"brand":"fiat","value":1},
{"brand":"bmw","value":2}
]
}
];
$.each(data, function(i, item) {
$('#secim').append($('<option>', {
value: item.brands_values.value,
text: item.brands_values.brand
}));
});
我该怎么办? 谢谢
只需为品牌添加另一个循环:
var data = [ { "products": "Cars", "brands_values" : [ {"brand":"fiat","value":1}, {"brand":"bmw","value":2} ] }]; $.each(data, function(i, item) { if (item.brands_values) { item.brands_values.forEach(brands => { $('#secim').append($('<option>', { value: brands.value, text: brands.brand })); }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="secim"> </select>
注意:在这种情况下,您可能希望使用原生.forEach
,因为它已经足够了。 我以前遇到过jQuery.each()
性能问题,所以每当我可以避免它时( 检查一下 ):
data.forEach(item => {
if (item.brands_values) {
item.brands_values.forEach(brands => {
$('#secim').append($('<option>', {
value: brands.value,
text: brands.brand
}));
});
}
});
$.each(data, function(i, item) {
$.each(item.brands_values, function(j, brand){
$('#secim').append($('<option>', {
value: brand.value,
text: brand.brand
}));
});
});
你需要另一次迭代 - 当然第一个“循环”不是很优雅,但这是由于给定的数据格式。
工作小提琴: https : //jsfiddle.net/3pL6n6pj/
迭代品牌价值,而不仅仅是数据。 这样您就可以访问每个品牌和价值。
var data = [ { "products": "Cars", "brands_values" : [ {"brand":"fiat","value":1}, {"brand":"bmw","value":2} ] } ]; $.each(data[0].brands_values, function(i, item) { $('#secim').append($('<option>', { value: item.value, text: item.brand })); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="secim"> </select>
首先使用#reduce()
函数从data
创建brand_values
列表。 然后将其作为items
传递给$.each
。
见下面的演示:
var data = [{ "products": "Cars", "brands_values": [{ "brand": "fiat", "value": 1 }, { "brand": "bmw", "value": 2 } ] }]; var items = data.reduce(function(p,c){ c.brands_values.forEach(function(e){ p.push(e); }); return p; },[]); $.each(items, function(i,item) { $('#secim').append($('<option>', { value: item.value, text: item.brand })); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="secim"></select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.