When iterating JSON with Javascript for...in, the final key returned is "remove"

Question

This is a strange occurrence to be sure. First off, I'm using Chrome version 23.x and have not tried to reproduce this in other browsers yet.

I receive a JSON array from the server of the form:

JSON

{
"layout":0,
"caption":"Work History",
"cols":[
   {"field":"company","label":"Company Name","hidden":false,"order":-1,"validationType":2,"list":[]},       {"field":"date_start","label":"From","hidden":false,"order":-1,"validationType":1,"list":[]},
   {"field":"date_end","label":"Until","hidden":false,"order":-1,"validationType":0,"list":[]},
   {"field":"position","label":"Title","hidden":false,"order":-1,"validationType":2,"list":[]},
   {"field":"description","label":"Description","hidden":false,"order":-1,"validationType":0,"list":[]},
   {"field":"project","label":"Project","hidden":false,"order":-1,"validationType":64,"list":[]}
   ]
}

Then, I attempt to loop over the cols objects with Javascript"

Javascript

for (var c in json.cols) {
    console.log("col name: " + c);
}

Google Chrome's console prints the following:

Output

col name: 0
col name: 1
col name: 2
col name: 3
col name: 4
col name: 5
col name: remove

There should only be 6 outputs, first of all. Second, where does this final "remove" key come from? Why is it listed?

`cols` isn't an object, it's an array. Don't use `for...in` with an array, for this reason. — Andrew Whitaker, Jan 10 '13 at 18:21
You *can* use it on an array but the results may not be what you expect. [MDN has a good writeup on it](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for...in) — Andrew Whitaker, Jan 10 '13 at 18:22
You can (arrays are just objects after all), but you iterate over other properties as well, not only array elements. — Felix Kling, Jan 10 '13 at 18:23
Also note that the problem itself does not have to do anything with JSON. It does not matter *how* you got the data, just what it is. — Felix Kling, Jan 10 '13 at 18:33
I knew it wasn't an issue with the JSON. I just included that as reference to what my data was so it wouldn't be a question. I actually figured it was an issue with for...in, or at least how I was using it. I tried searching this very topic before posting, and no suggestions came up, but that is because I mischaracterized why I was getting this strange result. Thanks for help. — crush, Jan 10 '13 at 18:36

bfavaretto · Accepted Answer · 2013-01-10T18:32:43.257

3

Your obj.json.cols is actually an array, not an object, so you should iterate over it with a for(;;) loop. I believe you're looking for something like this:

for (var i=0; i<json.cols.length; i++) {
    console.log("col name: " + json.cols[i].label);
}

Furthermore, there seems to be some script messing with Array.prototype on your webpage, as with a for..in loop you should not be seeing a remove property.

edited Jan 10 '13 at 18:32

answered Jan 10 '13 at 18:24

bfavaretto

71,580
16
111
150

I tested here, the result is the same. – Gabriel Gartz Jan 10 '13 at 18:26
So your object is not what you think, see http://jsfiddle.net/T2hUX/ – bfavaretto Jan 10 '13 at 18:27
I have an Array.prototype.remove() specified, yes. I guess that explains where it is coming from. Thanks for reminding me. – crush Jan 10 '13 at 18:28

score 3 · Answer 2 · answered Jan 10 '13 at 18:25

3

Use if( json.cols.hasOwnProperty(c) ) { ... } to wrap your code inside the for...in loop.

Taken from mdn:

If you only want to consider properties attached to the object itself, and not its prototypes, use getOwnPropertyNames or perform a hasOwnProperty check (propertyIsEnumerable can also be used).

A for...in loop iterates over the properties of an object in an arbitrary order

JavaScript:

for (var c in json.cols) {
    if( json.cols.hasOwnProperty(c) ) {
      console.log("col name: " + c);
    }
}

EXAMPLE

answered Jan 10 '13 at 18:25

Chase

29,019
1
49
48

If you wouldn't mind, please let me know why I was down voted. If you feel the information is incorrect then I will gladly fix it =). – Chase Jan 10 '13 at 18:30
2

Probably because there is no reason to use `for...in` on arrays, a normal `for` loop will do just fine (it's faster too). – Felix Kling Jan 10 '13 at 18:30
I don't see the problem of his implementation with for...in, he used correctly the `hasOwnProperty` how ever, the `for` loop is a faster iterator. I don't think give @Chase a down vote is honest. – Gabriel Gartz Jan 10 '13 at 18:35
2

Yeah, I completely agree on the relevance of the `for...in` vs a `for`, however, I mainly wanted to specify what the issue actually was, instead of just saying "Change it to a `for` loop". Thanks though @FelixKling, you're probably correct. Since @bfavaretto already has the `for` loop difference, there's little reason for me to add it to my answer, however, it could be beneficial to some, so I'll leave it here for now. – Chase Jan 10 '13 at 18:36

When iterating JSON with Javascript for...in, the final key returned is "remove"

2 Answers2