javascript - 遍历json对象的所有元素

Question

我有一个 ajax 调用，成功获得以下格式的 json 对象：

{test 1: Array(2), test 2: Array(3), test 3: Array(2)}

每个键内的数组看起来像

0: {IdProduct: "1", ProductName: "p1", ProductCode: "pc1", ProductVersion: "pv1"}
1: {IdProduct: "2", ProductName: "p2", ProductCode: "pc2", ProductVersion: "pv2"}

我想遍历所有这些元素以创建一个选项组我的理解是有两个 for 循环并在第一个循环中创建级别和第二个循环中的选项，我编写了以下代码，但无法正常工作：

    success: function(response) {
                    var options = '<optgroup label="'+Object.keys(response)[0]+'">';
                    response.forEach(function (data) {
                        options += '<option value="' + data.IdProduct + '">' + data.ProductName;
                        options += '</option>';
                    });
 options += '</optgroup>';
                    productsFilter.html(options);
                }

标签： javascriptjquery

Answer 1

您确实需要两个循环来执行此操作。我做了一个 for-in 来遍历顶部的 JSON 属性，然后确实将你的 foreach 用于数组。顺便说一句，我模拟了 JSON 响应只是为了填写其余部分。

var response = {
  'test 1': [{
    IdProduct: "1", 
    ProductName: "p1", 
    ProductCode: "pc1", 
    ProductVersion: "pv1"
  },{
    IdProduct: "2", 
    ProductName: "p2", 
    ProductCode: "pc2", 
    ProductVersion: "pv2"
  }], 
  'test 2': [{
    IdProduct: "3", 
    ProductName: "p3", 
    ProductCode: "pc3", 
    ProductVersion: "pv3"
  },{
    IdProduct: "4", 
    ProductName: "p4", 
    ProductCode: "pc4", 
    ProductVersion: "pv4"
  },{
    IdProduct: "5", 
    ProductName: "p5", 
    ProductCode: "pc5", 
    ProductVersion: "pv5"
  }], 
  'test 3': [{
    IdProduct: "6", 
    ProductName: "p6", 
    ProductCode: "pc6", 
    ProductVersion: "pv6"
  },{
    IdProduct: "7", 
    ProductName: "p7", 
    ProductCode: "pc7", 
    ProductVersion: "pv7"
  }]};

var options = "";
for (var key in response) {  
  options += '<optgroup label="'+ key + '">';
  response[key].forEach(function (data) {
    options += '<option value="' + data.IdProduct + '">' + data.ProductName;
    options += '</option>';
  });
  options += '</optgroup>';
}

var productsFilter = $("select#productsFilter");
productsFilter.html(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="productsFilter"></select>