Loop Through Array inside Object in Javascript

Question

Possible Duplicate:
Loop through Json object

{
  "data": [
    {
      "name": "Jen",
      "id": "1"
    },
    {
      "name": "Steve",
      "id": "8"
    }
  ]
}

A server I'm interacting with responds with the above.

I'm trying to loop through itenter code here for the For..in statement.

This is what I'm trying to do:

for (var item in response.data) {
  console.log(item.name);
}

This doesn't work. What went wrong?

Thank you

I GOT IT to work with the following after reading the comment:

for (var item in response.data) {
  console.log(response.data[item].name);
}

I was able to get a list of names...

Can someone dissect the response as to why it worked?

Not an appropriate duplicate. This is a different object structure from the linked one. — Michael Berkowski, Feb 24 '12 at 01:53
How many times can we ask how to loop through arrays/objects on StackOverflow. I'm willing to bet this is the 100th time; indeed see: https://www.google.com/search?as_q=loop+javascript+object&as_epq=&as_oq=&as_eq=&as_nlo=&as_nhi=&lr=&cr=&as_qdr=all&as_sitesearch=stackoverflow.com&as_occt=any&safe=images&tbs=&as_filetype=&as_rights= And the "are you sure that's Javascript not JSON" comment? Do you know what JSON stands for? — Dexygen, Feb 24 '12 at 01:58
@GeorgeJempty - About JSON, what do you mean? JSON isn't part of JavaScript, it just _looks_ like it... Distinguishing between JavaScript objects and JSON is vital to any use of either... — nnnnnn, Feb 24 '12 at 02:05
see my answer to this question for a good explanation: http://stackoverflow.com/questions/9415851/how-to-change-the-background-image-of-a-button-using-javascript/9415967#9415967 — ckozl, Feb 24 '12 at 02:14
JSON stands for "Javascript Object Notation". It's a subset of Javascript object literal notation. Enough said. — Dexygen, Feb 24 '12 at 13:01

Michael Berkowski · Answer 1 · 2012-02-24T01:55:45.873

11

data is actually an array (denoted by []), rather than an object so you want a regular for loop rather than a for in.

for (var i = 0; i<response.data.length; i++) {
  // use i as an array index
  console.log(response.data[i].name);
}

In JavaScript, the for in construct is used for iterating over object properties, but to iterate an array an incremental for loop is typically used.

edited Feb 24 '12 at 01:55

answered Feb 24 '12 at 01:52

Michael Berkowski

267,341
46
444
390

I was able to get the above format to work. I was just curious how to do it with For..in But Thank you! That confirms me – William Sham Feb 24 '12 at 01:56

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

Check out: Why is using "for...in" with array iteration a bad idea?

For...in iterates through names of the properties of an object. Array items are also considered "properties", so for..in iterates through indexes (which are 0, 1 in your case). As expected when you use response.data[0] you get first element of your array.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 24 '12 at 02:17

Alexei Levenkov

98,904
14
127
179

score 0 · Answer 3 · answered Feb 24 '12 at 02:17

for..in iterates over the enumerable properties of an object in no particular order (you may get a different order in different browsers). An array is just a plain object with a special length method and handy methods inherited from Array.prototype (some of which depend on the special length property). There is no restriction on what can be used for a property name, they are not restricted to non-negative integers (noting that where a properly name is not a valid identifier, square bracket notation must be used to access its value).

The indexes of an array are just string property names (i.e. they are just plain object property names) that are non-negative integers, so a for..in loop will iterate over the numeric indexes (again, not necessarily in ascending or descending order) as well as all other enumerable properties, including those on the [[Prototype]] chain. Therefore it is always recommended to include a hasOwnProperty test with for..in unless you want to include inherited enumerable properties.

Because of the above, it is generally much better to iterate over array properties using a counter from 0 to array.length - 1 (since the length is always one bigger than the last index).

To test the "no particular order" statement, try the following in IE and other browser and note the different order:

var a = [];
a[2] = 2;
a[0] = 0;
a[3] = 3;
var b = [];
for (var i in a) b.push(a[i]);
alert(b);

Loop Through Array inside Object in Javascript

3 Answers3