如何使用jquery访问JSON嵌套数组

时间:2017-08-17 11:18:38

标签: javascript jquery arrays json

我正在尝试访问下拉菜单中的所有品牌和值 但我不能用这种方式。

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

我该怎么办?谢谢

4 个答案:

答案 0 :(得分:2)

为品牌添加另一个循环:

&#13;
&#13;
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
        }));
      });
   }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="secim">
</select>
&#13;
&#13;
&#13;

注意:在这种情况下,您可能希望使用本机.forEach,因为它已足够。我过去曾遇到jQuery.each()的性能问题,所以我可以随时避免(check this):

data.forEach(item => {
    if (item.brands_values) {
        item.brands_values.forEach(brands => {
            $('#secim').append($('<option>', {
                value: brands.value,
                text: brands.brand
            }));
        });
    }
});

答案 1 :(得分:1)

$.each(data, function(i, item) {
  $.each(item.brands_values, function(j, brand){
    $('#secim').append($('<option>', {
      value: brand.value,
      text: brand.brand
    }));
  });
});

你需要另一次迭代 - 当然第一次&#34;循环&#34;不是很优雅,但这是由于给定的数据格式。

工作小提琴:https://jsfiddle.net/3pL6n6pj/

答案 2 :(得分:0)

迭代品牌价值,而不仅仅是数据。这样您就可以访问每个品牌和价值。

  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>

答案 3 :(得分:0)

首先使用data函数从#reduce()创建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 })); });

见下面的演示:

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="secim"></select>
&#13;
click
&#13;
&#13;
&#13;