JSON array only gives "1" as length, cannot loop through

Question

I have the following json array:

var champions = [{
  "1":{
    "name":"Aatrox",
    "role1":"Top",
    "role2":"Jungle"},
  "2":{
    "name":"Ahri",
    "role1":"Middle"},
  "3":{"
    name":"Akali",
    "role1":"Middle",
    "role2":"Top"
   }
}];

and I trying to loop through this array with a code snippet I found:

$(document).ready(function(){
    var x = 1;
    for(var i = 0; i < champions.length; i++) {
        console.log(champions[i][x].name);
        x++;
    }
});

But it only gives me "Aatrox" and stops as champions.length is 1.
How can I loop through the array for all names?

It is not just an array. It is a single element array with various numbered properties (on that single element). — iCollect.it Ltd
– iCollect.it Ltd, Commented Apr 20, 2015 at 15:14
console.log(champions[0][i].name); will work. first depth is the array. — mat
– mat, Commented Apr 20, 2015 at 15:17
you are looping in an array with only one element, and that element actually contains three elements. — rvandoni
– rvandoni, Commented Apr 20, 2015 at 15:19
so what is the right way to loop through this? console.log(champions[0][i].name); does not work. I have no idea how the for needs to look like — PrimuS
– PrimuS, Commented Apr 20, 2015 at 15:27

iCollect.it Ltd · Accepted Answer · 2015-04-20 15:50:58Z

5

Assuming you do not wish to change your data structure, you can iterate the array and then the properties of each object within it (then access the name):

var champions = [{
  "1":{
    "name":"Aatrox",
    "role1":"Top",
    "role2":"Jungle"},
  "2":{
    "name":"Ahri",
    "role1":"Middle"},
  "3":{
      "name":"Akali",
    "role1":"Middle",
    "role2":"Top"
   }
}];

$(document).ready(function(){
    for(var i = 0; i < champions.length; i++) {
        for (var prop in champions[i]){
            console.log(champions[i][prop].name);
        }
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/234yspw1/

Note: The order they are returned is undefined, so you should not count on that.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/234yspw1/1/

If order is important you need to restructure your data to be an array.

edited Apr 20, 2015 at 15:50

answered Apr 20, 2015 at 15:24

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

Comments

CodingIntrigue · Accepted Answer · 2015-04-20 15:21:29Z

3

Note: As everyone has pointed out, your data structure is a little odd. The best idea is to make sure your array is correctly structured so that you can iterate it as an array, but you can also iterate an array containing a single object:

jQuery's each does a good job of iterating objects & keys:

if(champions.length) {
    $.each(champions[0], function(key, value) {
        console.log(value.name);
    });
}

jsFiddle

answered Apr 20, 2015 at 15:21

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Comments

WakeskaterX · Accepted Answer · 2015-04-20 15:26:31Z

3

Edit: Working JS Fiddle: https://jsfiddle.net/3ms8s9jr/

var champions = [{
  "1":{
    "name":"Aatrox",
    "role1":"Top",
    "role2":"Jungle"},
  "2":{
    "name":"Ahri",
    "role1":"Middle"},
  "3":{"
    name":"Akali",
    "role1":"Middle",
    "role2":"Top"
   }
}];

needs to be:

var champions = [
  {
    "name":"Aatrox",
    "role1":"Top",
    "role2":"Jungle"
  },
  {
    "name":"Ahri",
    "role1":"Middle"
  },
  { 
    "name":"Akali",
    "role1":"Middle",
    "role2":"Top"
  }
];

You need to have one object per champion, right now you have them all stored in one big object, so you can't loop through it easily (rather, it's just awkward to do it effectively).

Ideally you want to have your data in a format that is easy to use, so converting the data if you need to into an array is probably going to be the best long term option.

Loop through that like this:

$(document).ready(function(){
    for(var i = 0; i < champions.length; i++) {
        console.log(champions[i].name);
    }
});

edited Apr 20, 2015 at 15:26

answered Apr 20, 2015 at 15:18

WakeskaterX

1,4269 silver badges22 bronze badges

2 Comments

iCollect.it Ltd Over a year ago

Of course you can iterate the properties of the one object. Just not the outer array. You should not need to change the data to match the code.

WakeskaterX Over a year ago

The data structure is awkward, is all your data in that format? If so just pull out the data from the object and push it to an array.

AJcodez · Accepted Answer · 2015-04-20 15:28:10Z

2

It's an array of length one. Iterate objects like so:

var champs = champions[0]
var keys = Object.keys(champs)

// if you need them in order
keys = keys.map(Number).sort().map(String)

// iterate
keys.forEach(function (key, index) {
   console.log(key)           // "1"
   console.log(champs[key])   // { "name": "etc" }
})

answered Apr 20, 2015 at 15:28

AJcodez

34.5k21 gold badges88 silver badges119 bronze badges

Comments

JoshWillik · Accepted Answer · 2015-04-20 15:23:50Z

1

If you want to loop this array

var champions = [{
  "1":{
    "name":"Aatrox",
    "role1":"Top",
    "role2":"Jungle"},
  "2":{
    "name":"Ahri",
    "role1":"Middle"},
  "3":{"
    name":"Akali",
    "role1":"Middle",
    "role2":"Top"
   }
}];

Your code will need to look like this

for( var i = 0, end = champions.length; i < end; i++ ){
  for( var attr in champions[i] ){
    if( !champions[i].hasOwnProperty( attr ) ){
      continue
    }
    // champions[i][attr] is the champion here
  }

Alternateley, you can convert your odd looking json to a regular array with this rather strange looking bit of code.

var championsArray = Array.prototype.splice.call( champions[0] )

Then loop through it normally.

edited Apr 20, 2015 at 15:23

answered Apr 20, 2015 at 15:21

JoshWillik

2,63524 silver badges38 bronze badges

3 Comments

T.J. Crowder Over a year ago

"for( var i in champions )" Best to avoid using for-in to loop through arrays (without safeguards); that's not what it's for. (The inner loop is fine, though.)

BenjaminPaul Over a year ago

@T.J.Crowder ive ran into problems with for-in lately and was wondering what the correct usage of it is? I never really worked out what the issue was... I simply changed to a for loop and things worked!

T.J. Crowder Over a year ago

@BenjaminPaul: Or my answer on the topic... :-)

Collectives™ on Stack Overflow

JSON array only gives "1" as length, cannot loop through

5 Answers 5

Comments

Comments

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related