如何使用jQuery在JavaScript中循环嵌套数组对象

117

假符文

嘿，我正在做一个项目，我似乎无法理解。我想遍历嵌套数组对象“产品”，以便我可以显示所有内容，而不仅仅是最后一个索引。

// 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  }
    ]

罗里·麦克罗森（Rory McCrossan）

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

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

但是，值得注意的是，在您的JS中包含这么多的HTML不是一个好习惯。更好的方法是tr在HTML中有一个隐藏的模板，您可以克隆该模板，使用data数组中的数据进行更新，然后将其追加到表的DOM中tbody。

话虽如此，请尝试以下操作：

//$.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。