如何使用 jquery 在 javascript 中循環嵌套數組 object

Question

嘿，我正在做一個項目，但我似乎無法掌握這個竅門。 我想遍歷我的嵌套數組 object “產品”，以便我可以顯示所有內容，而不僅僅是最后一個索引。

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

您的代碼中有幾個問題。 首先，您要為data數組中的每個 object 創建一個全新的表。 相反，在表中為每個項目創建一個新行更有意義。

此外，您似乎想要遍歷子products數組。 因此，您需要一個內部循環來為模板文字之外的那些元素創建 HTML 字符串。

但是值得注意的是，在您的 JS 中包含那么多 HTML 並不是一個好習慣。 更好的方法是在 HTML 中有一個隱藏模板tr ，您可以克隆它，使用data數組中的數據進行更新，然后將 append 更新到表tbody中的 DOM。

話雖如此，試試這個：

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

Answer 2

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

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

也許這就是問題所在？ 訂單的數量與 products 數組中的產品數量相似嗎？