如何使用 jquery 循环 javascript 中的嵌套数组对象

Question

嘿，我正在做一个项目，但我似乎无法掌握其中的窍门。我想遍历我的嵌套数组对象 "products" 以便我可以显示所有内容而不仅仅是最后一个索引。

// jquery getting our json order data from firebase
    $.get("http://localhost:8888/orderslist", (data) => {    


        // i is for the index of the array of orders
        let i = 0;    
        //for each loop through our array list
        $.each(data, function () {
            //console.log(data)
            //console.log(i);
            // is how we arrange the data and show it to the frontpage
            $(`<table id = order_table_layout>
                    <tr>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Total</th>
                        <th>Order</th>
                        <th>Order Status</th>
                    </tr>
                    <tr>
                        <td>${data[i].customer_name}</td>
                        <td>${data[i].date}</td>
                        <td>${data[i].time}</td>
                        <td>${data[i].total} Kr.</td>

                        <td>
                            ${data[i].products[i].name}
                            ${data[i].products[i].price} Kr.
                        </td>

                        <td>

                        </td>
                    </tr>
                </table>`

            ).appendTo("#frontpage_new_ordertable");        
            // counts 1 up for each loop to go through list
            i++;
            //console.log(i);
        });
    });

编辑：我正在处理的 json 数据示例如下所示：

[
  {
    id: "4WQITi6aXvQJsKilBMns",
    customer_name: "Susanne",
    date: "22-12-2002",
    time: "12:43:19",
    total: 222,
    products: [
      { name: "product name",  price: 100 },
      { name: "product name2", price: 20  }
    ]

Answer 1

<td>${data[i].total} Kr.</td>

                        <td>
                            ${data[i].products[i].name}
                            ${data[i].products[i].price} Kr.

也许这就是问题所在？订单的数量是否与产品数组中的产品数量相似？

Answer 2

您的代码中存在几个问题。首先，您要为 data 数组中的每个对象创建一个全新的 table。在 table 中为每个项目创建一个新的行更有意义。

此外，您似乎想要遍历子 products 数组。因此，您需要一个内部循环来为模板文字之外的那些元素创建 HTML 字符串。

然而值得注意的是，在你的 JS 中有那么多 HTML 并不是一个好习惯。更好的方法是在你的 HTML 中有一个隐藏的模板 tr，你可以克隆它，用 data 数组中的数据更新，然后附加到 DOM tbody 的 table。

话虽如此，试试这个：

//$.get("http://localhost:8888/orderslist", (data) => {
  // mock response:
  let data = [{id:"4WQITi6aXvQJsKilBMns",customer_name:"Susanne",date:"22-12-2002",time:"12:43:19",total:222,products:[{name:"product name",price:100},{name:"product name2",price:20}]},{id:"asjdkjk21ijjjew",customer_name:"Foo Bar",date:"10-05-2020",time:"16:46:16",total:68,products:[{name:"Lorem ipsum",price:50},{name:"Fizz buzz",price:18}]}];

  let rows = data.map(item => {
    let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
    $clone.find('.customer-name').text(item.customer_name);
    $clone.find('.date').text(item.date);
    $clone.find('.time').text(item.time);
    $clone.find('.total').text(item.total + ' Kr.');

    let products = item.products.map(prod => `${prod.name}: ${prod.price} Kr.`);
    $clone.find('.products').html(products.join('<br />'));
    return $clone;
  });

  $("#frontpage_new_ordertable tbody").append(rows);
//});

tfoot { 
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="frontpage_new_ordertable">
  <tbody>
    <tr>
      <th>Customer</th>
      <th>Date</th>
      <th>Time</th>
      <th>Total</th>
      <th>Order</th>
      <th>Order Status</th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="customer-name"></td>
      <td class="date"></td>
      <td class="time"></td>
      <td class="total"></td>
      <td class="products"></td>
      <td></td>
    </tr>
  </tfoot>
</table>

如何使用 jquery 循环 javascript 中的嵌套数组对象

how to loop a nested array object in javascript with jquery

javascript

arrays

jquery

object

nested-loops