CODEWITHSUNDEEP
javascriptarraysjavascript-objects
Jeeva Raam
Jeeva Raam

Reputation: 47

JavaScript nested object array, How to loop through the 'KEY' of 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 ) {
  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

Upvotes: 0

Views: 3611

Answers (3)

Shiladitya
Shiladitya

Reputation: 12181

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>

Upvotes: 0

YourGoodFriend
YourGoodFriend

Reputation: 973

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 />";
}

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56600

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.

Upvotes: 0

Related Questions