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>