Loop through objects in array, print properties

Question

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.

Should show up in the div as:

string describing the first order
string describing the second order

My results:

first order
first order
second order

Please also add HTML and SCRIPT to the snippet to make a minimal reproducible example — mplungjan
– mplungjan, Commented Mar 21, 2018 at 10:35
I'd recommend creating real HTML Nodes rather than just appending strings because it gives you so much more control and options with the created list. — connexo
– connexo, Commented Mar 21, 2018 at 11:05

Mamun · Accepted Answer · 2018-03-21 10:57:35Z

2

Just adding a <br> to the innerHTML in each iteration of Array's forEach() will do the trick:

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>

edited Mar 21, 2018 at 10:57

answered Mar 21, 2018 at 10:48

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

connexo · Accepted Answer · 2018-03-21 11:01:56Z

for...in is for iterating over Object properties, not for Array. Use 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. In the second example I show adding title and alerting the order ID on click:

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>

Kickass · Accepted Answer · 2018-03-21 10:55:52Z

0

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.

edited Mar 21, 2018 at 10:55

answered Mar 21, 2018 at 10:47

Kickass

1,15210 silver badges16 bronze badges

Collectives™ on Stack Overflow

Loop through objects in array, print properties

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related