遍历数组中的对象，打印属性
[英]Loop through objects in array, print properties
问题描述
I got a situation like this: 
我遇到这样的情况：
var orders = [ {ID: "sampleID1", order: "string describing the first order"}, {ID: "sampleID2", order: "string describing the second order"} ]; const bill = document.querySelector("#ordersListed"); for(var x in orders) { bill.innerHTML += orders[x].order; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="ordersListed"></div> </body> </html>
Each time I click a button, an item gets added to the array. 每次单击按钮时，都会将一个项目添加到数组中。
I've been trying to loop through the array to print each order in a HTML element. 我一直在尝试遍历数组以在HTML元素中打印每个订单 。
Should show up in the div as: 应该在div中显示为：
string describing the first order
string describing the second order
My results: 我的结果：
first order
first order
second order
3 个解决方案
解决方案1
2 2018-03-21 10:48:55
Just adding a <br> to the innerHTML in each iteration of Array's forEach() will do the trick: 只需在Array的forEach()每次迭代中将<br>添加到innerHTML ：
var orders = [ {ID: "sampleID1", order: "string describing the first order"}, {ID: "sampleID2", order: "string describing the second order"} ]; const bill = document.querySelector("#ordersListed"); orders.forEach(o => bill.innerHTML += o.order + '<br>');
<div id="ordersListed"></div>
解决方案2
1 已采纳 2018-03-21 10:46:15
for...in is for iterating over Object properties, not for Array . for...in用于迭代Object属性，而不是Array 。 Use for...of : for...of ：
var orders = [{ ID: "sampleID1", order: "string describing the first order" }, { ID: "sampleID2", order: "string describing the second order" }] for (order of orders) { let para = document.createElement('p') para.textContent = order.order ordersListed.appendChild(para) }
#ordersListed { background: #f8f8f8; border: 4px dashed #ddd; padding: 5px 15px; }
<div id="ordersListed"></div>
Note : I prefer to create real DOM Nodes so I can easily add attributes and attach event handlers. 注意 ：我更喜欢创建真实的DOM节点，以便可以轻松添加属性并附加事件处理程序。 In the second example I show adding title and alerting the order ID on click: 在第二个示例中，我显示添加标题并在单击时警告订单ID：
var orders = [{ ID: "sampleID1", order: "string describing the first order" }, { ID: "sampleID2", order: "string describing the second order" }] for (order of orders) { let para = document.createElement('p') para.textContent = order.order para.title = order.ID para.addEventListener('click', function() { alert(this.title) }) ordersListed.appendChild(para) }
#ordersListed { background: #f8f8f8; border: 4px dashed #ddd; padding: 5px 15px; } #ordersListed p { cursor: pointer; }
<div id="ordersListed"></div>
解决方案3
0 2018-03-21 10:47:54
How about: 怎么样：
var orders = [
{ID: "sampleID1", order: "string describing the first order"},
{ID: "sampleID2", order: "string describing the second order"}
];
for (var i = 0; i < orders.length; i++ ) {
orderListContainer.textContent += orders[i]['order'];
}
As far as I can see you were appending the array element instead of the correct property to the array element. 据我所知，您正在将array元素而不是正确的属性附加到array元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.