[英]how to loop a nested array object in javascript with jquery
Hey im working on a project and i can't seem to get the hang of this.嘿,我正在做一个项目,但我似乎无法掌握这个窍门。 I want to loop through my nested array object "products" so that i can display it all and not just the last index.
我想遍历我的嵌套数组 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);
});
});
Edit: An example of the json data I'm working with look like this:编辑:我正在使用的 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 }
]
There's a couple of issues in your code.您的代码中有几个问题。 Firstly you're creating a brand new table for every object in the
data
array.首先,您要为
data
数组中的每个 object 创建一个全新的表。 It makes far more sense to instead create a new row in the table for each item.相反,在表中为每个项目创建一个新行更有意义。
Also, it appears that you want to loop through the child products
array.此外,您似乎想要遍历子
products
数组。 As such you need an inner loop to create the HTML string for those elements outside of the template literal.因此,您需要一个内部循环来为模板文字之外的那些元素创建 HTML 字符串。
However it's worth noting that it's not good practice to have that much HTML in your JS.但是值得注意的是,在您的 JS 中包含那么多 HTML 并不是一个好习惯。 A better approach is to have a hidden template
tr
in your HTML which you can clone, update with the data from the data
array, then append to the DOM in the tbody
of the table.更好的方法是在 HTML 中有一个隐藏模板
tr
,您可以克隆它,使用data
数组中的数据进行更新,然后将 append 更新到表tbody
中的 DOM。
With that said, try this:话虽如此,试试这个:
//$.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.
maybe that's what's wrong?也许这就是问题所在? is the number of the order similar to the number of product in products array?
订单的数量与 products 数组中的产品数量相似吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.