javascript - Jquery 在嵌套循环中显示项目

Question

我想显示属于不同客户的商品。为此，我通过 ajax 调用获取数据，然后根据每个唯一的客户对数据进行分组。然后我将分组数据附加到我的 html 中。

我的分组数据的结构如下所示:

"John Doe": [
    {
        "Item_id" : 1
        "Item_name": "abc"
    },
    {
        "Item_id" : 2
        "Item_name": "def"
    },
],
"Jane Doe":
    {
        "Item_id" : 3
        "Item_name": "ghi"
    },
    {
        "Item_id" : 4
        "Item_name": "jkl"
    },
]

我的代码如下:

$.each(groupedData, function (key, value) {       
    $('.cust_items').append(`
        <h4 class="mb-0"> ` + key + `</h4>                  
        <table id="dataTable">
            <thead>
                <th>Item No.</th>
                <th>Item Name</th>
            </thead>
            <tbody></tbody>
        </table>
    `);

    $.each(value, function (ky, val) {
        $('#dataTable tbody').append(
            `<tr>
                <td>
                    ` + ky + `
                </td>
                <td>
                    ` + val.Item_name + `
                </td>
            </tr>
        `);
    });
});

我面临一个问题，即所有项目都显示在第一个客户下，而数据正确显示在第二个客户下。

Answer 1

属性后缺少逗号，并且 Jane Doe 属性的对象未包含在 [] 中。考虑更改您的 groupedData 对象，因为语法不正确。

编辑:还调整了模板字符串并使用动态 ID 访问表。

示例:

let groupedData = {
  "John Doe": [{
      "Item_id": 1,
      "Item_name": "abc"
    },
    {
      "Item_id": 2,
      "Item_name": "def"
    }
  ],
  "Jane Doe": [{
      "Item_id": 3,
      "Item_name": "ghi"
    },
    {
      "Item_id": 4,
      "Item_name": "jkl"
    }
  ]
};

$.each(groupedData, function(key, value) {
  $('.cust_items').append(`
        <h4 class="mb-0">${key}</h4>                  
        <table id="dataTable_${key.split(' ').join('_')}">
            <thead>
                <th>Item No.</th>
                <th>Item Name</th>
            </thead>
            <tbody></tbody>
        </table>
    `);

  $.each(value, function(ky, val) {
    $(`#dataTable_${key.split(' ').join('_')} tbody`).append(
      `<tr>
                <td>
                    ${ky}
                </td>
                <td>
                    ${val.Item_name}
                </td>
            </tr>
        `);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cust_items">
</div>