How to loop multiple objects inside an array in JavaScript

Question

I would like to know how to loop multiple objects inside an array in vanilla JavaScript.

The below example doesn't work and I don't know why.

<!DOCTYPE html>
<html>
<body style="background-color: #d89797;">
  <h2>JavaScript Arrays</h2>
  <p>The best way to loop through an array is using a standard for loop:</p>
  <p id="demo"></p>
  <script>
    var fruits, text, fLen, i;

    fruits = [{
        "customerID": "10",
        "countInvoices": "42",
        "name": "Xuseen"
      },
      {
        "customerID": "100",
        "countInvoices": "420",
        "name": "khalid khalid"
      }
    ];
    fLen = fruits.length;
    text = "<ul>";

    for (i = 0; i < fLen; i++) {
      text += "<li>" + fruits[i] + "</li>";
    }

    text += "</ul>";
    document.getElementById("demo").innerHTML = text;
  </script>
</body>
</html>

Thanks.

and how this is related to CSS, MYSQL, PHP, HTML5? it's only a JS issue — Temani Afif, Jul 17 '18 at 19:21
You are using an array containing an object. Add `for (n in fruits[i]) {` to the first line in your for-loop in order to iterate over the object in your array as well. `n` now delivers you the key. So to add the values you would want to have `fruits[i][n]` instead of `fruits[i]` — Carle B. Navy, Jul 17 '18 at 19:24

score 0 · Answer 1 · answered Jul 17 '18 at 19:27

You need to add array keys which you need to print out.

Here updated code:

 var fruits, text, fLen, i;

fruits = [{"customerID":"10", "countInvoices":"42", "name":"Xuseen"},
        {"customerID":"100", "countInvoices":"420", "name":"khalid khalid"}];

fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>ID: " + fruits[i]['customerID'] + " countInvoices: "+fruits[i]['countInvoices']+" and NAME ="+fruits[i]['name']+" </li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;

Good luck.

score 0 · Answer 2 · answered Jul 17 '18 at 19:28

You have to iterate over the object inside your array as well.

var fruits, text, fLen, i;
fruits = [{"customerID":"10", 
    "countInvoices":"42", 
    "name":"Xuseen"},
    {"customerID":"100", 
    "countInvoices":"420", 
    "name":"khalid khalid"}];

    fLen = fruits.length;
    text = "<ul>";
    for (i = 0; i < fLen; i++) {
      for (key in fruits[i]) {
          text += "<li>" + key + ":" + fruits[i][key] + "</li>";
        }
    }
    text += "</ul>";
    document.getElementById("demo").innerHTML = text;

<h2>JavaScript Arrays</h2>

<p>The best way to loop through an array is using a standard for loop:</p>

<p id="demo"></p>

How to loop multiple objects inside an array in JavaScript

2 Answers2