![](/img/trans.png)
[英]JavaScript nested object array, How to loop through the 'KEY' of array?
[英]how to loop a nested array object in javascript with jquery
嘿,我正在做一個項目,但我似乎無法掌握這個竅門。 我想遍歷我的嵌套數組 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 }
]
您的代碼中有幾個問題。 首先,您要為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>
<td>${data[i].total} Kr.</td>
<td>
${data[i].products[i].name}
${data[i].products[i].price} Kr.
也許這就是問題所在? 訂單的數量與 products 數組中的產品數量相似嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.