JavaScript nested object array, How to loop through the 'KEY' of array?

Question

var myCollection = {
"cars": [
          { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
          { "name":"BMW", "models":[ "320", "X3", "X5" ] },
          { "name":"Fiat", "models":[ "500", "Panda" ] }
        ]
}
for ( x in myCollection ) {
  document.getElementById("id1").innerHTML += x + "<br />";
}

Ans : cars
Likewise how can I display the 'KEY' value which is inside the array i.e. 'name' or 'models'

for ( x in myCollection.cars ) {
  document.getElementById("id1").innerHTML += x + "<br />"; 
}

Ans :
0
1
2
Why it returns array index value, How can I display the 'KEY' value 'name' or 'models' ?

Expected Ans:

name      models 

name  OR  models 

name      models

YourGoodFriend · Accepted Answer · 2017-08-23 19:12:18Z

1

for loops are looping through each index, so you then have to take that index and drill into the array

var myCollection = {
"cars": [
          { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
          { "name":"BMW", "models":[ "320", "X3", "X5" ] },
          { "name":"Fiat", "models":[ "500", "Panda" ] }
        ]
}
for ( x in myCollection.cars ) {
  var keys = Object.keys(myCollection.cars[x])
  document.getElementById("id1").innerHTML += keys[0] + "<br />";
}

the myCollection.cars[x] is how you get the specific object in the array and from the Object.keys() gives you the keys of that object. If you want the value and the key

for ( x in myCollection.cars ) {
  var keys = Object.keys(myCollection.cars[x])
  document.getElementById("id1").innerHTML += 
     keys[0] + " : " + myCollection.cars[x].name + " <br />" +
     keys[1] + " : " + myCollection.cars[x].models + "<hr />";
}

edited Aug 23, 2017 at 19:12

answered Aug 23, 2017 at 17:01

YourGoodFriend

97315 silver badges22 bronze badges

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

3 Comments

Nikolay Baranenko Over a year ago

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

Jeeva Raam Over a year ago

myCollection.cars[keys[0]] returns undefined but keys[0] and keys[1] works fine as I expected.

YourGoodFriend Over a year ago

@NikolayBaranenko changed it to var so you wouldnt have that issue

Naren Murali · Accepted Answer · 2017-08-23 17:30:37Z

0

This for in is mean't for object's. You are using an array so its returning index. Instead use a forEach like shown below.

var myCollection = {
    "cars": [
              { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
              { "name":"BMW", "models":[ "320", "X3", "X5" ] },
              { "name":"Fiat", "models":[ "500", "Panda" ] }
            ]
    }
    myCollection.cars.forEach(function (value) {
      //console.log("name" + value.name + ", models" + value.models);
      //for printing cars alonecars
      console.log(value.name);
      //for print models alone
      value.models.forEach(function (model) {
        console.log(model);
      });
    });

The line below comments will get your desired output, you can print either cars or models.

edited Aug 23, 2017 at 17:30

answered Aug 23, 2017 at 17:00

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

4 Comments

Jeeva Raam Over a year ago

I know how to display a string value, I want to know how to LOOP through the 'KEY' or 'NAME' value of the nested array. Please revise the Expected Answers in my Question.

Naren Murali Over a year ago

@JeevaRaam Updated my answer can you please check?

Jeeva Raam Over a year ago

'for in' loop is more dynamic to loop through the 'value' values and I know how to do it, but what I was expecting is to loop the 'name' values.

Naren Murali Over a year ago

@JeevaRaam Glad you found the answer :)

Shiladitya · Accepted Answer · 2017-08-24 01:34:31Z

0

Here you go with a solution https://jsfiddle.net/sg6kj0n7/1/

var myCollection = {
"cars": [
          { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
          { "name":"BMW", "models":[ "320", "X3", "X5" ] },
          { "name":"Fiat", "models":[ "500", "Panda" ] }
        ]
}
for ( var x in myCollection.cars ) {
	for (var key in myCollection.cars[x]) {
 	 	document.getElementById("id1").innerHTML += key + "   ";
  }
  document.getElementById("id1").innerHTML += "<br/>";
}

<div id ="id1">

</div>

edited Aug 24, 2017 at 1:34

answered Aug 23, 2017 at 17:02

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

2 Comments

Jeeva Raam Over a year ago

I know how to loop through the 'VALUE' value, I want to know how to loop through the 'KEY' or 'NAME' value of the nested array.

Shiladitya Over a year ago

@JeevaRaam . I have updated the answer. Solution will work irrespective of N number of keys.

Collectives™ on Stack Overflow

JavaScript nested object array, How to loop through the 'KEY' of array?

3 Answers 3

3 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related