Looping over associative array

Question

I'm adding a bunch of input fields into an associative array. I can access the individual elements fine, eg. this works:

arr = new Array();
field = document.getElementById("someField");
arr[field] = someValue;
alert(arr[field].id);

But when I try to loop over them, the id shows up as undefined, and only one element is looped over.

for (var elem in arr) {
    alert(elem.id + " " + arr[elem]);
}

Am I looping over it wrong?

Edit: arr.length shows up as 0 for some reason even though I'm able to access its elements.

You shouldn't use for-in loops to loop over an array. Use a regular for loop instead. — dezman, Sep 10 '13 at 17:58
@Yuck Take a look at this answer: http://stackoverflow.com/a/3010848/603003 — ComFreek, Sep 10 '13 at 18:00
@Yuck This answer also has some good info: http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea — dezman, Sep 10 '13 at 18:01
Your arr is an object, not an array. Arrays are only for numerically indexed stuff in JavaScript — dezman, Sep 10 '13 at 18:06
You seem to be expecting JavaScript to behave like some other language you already know. Why is that? — user2736012, Sep 10 '13 at 18:07

dezman · Answer 1 · 2013-09-10T18:09:39.517

1

Any associative array in JavaScript is an object. Arrays are objects that have special methods because they are numerically indexed. So your code should look something like this:

obj = {};
field = document.getElementById("someField");
obj[field] = someValue;

for (var p in obj) {
    alert(obj[p].id);
}

edited Sep 10 '13 at 18:09

answered Sep 10 '13 at 18:03

dezman

18,087
10
53
91

mo. · Accepted Answer · 2013-09-11T07:39:28.513

1

the key in a javascript-array has to be a number or string. field is automatically converted to a string with toString().

arr = new Array();
field = document.getElementById("someField");
var key = field.toString();
arr[key] = someValue;
alert(arr[key].id);

in your for-loop, you iterate the keys of that array. field.toString() in that case. and a string does not have a id-property.

this will work:

for (var elem in arr) {
    alert(arr[elem].id + " " + arr[elem]);
}

by the way toString() of a DOM-Element ist often a generic string like "[SpanElement]". if you try to add multiple span-elements, you're effectivle overriding the item with "[SpanElement]" as key and end up with just one element.

in respect to @user2736012 comments, i encourage everyone to read "JavaScript Associative Arrays Demystified"

edited Sep 11 '13 at 07:39

answered Sep 10 '13 at 18:06

mo.

3,474
1
23
20

The `key` can be any value, but it's automatically converted to a string. Your `field.toString()` isn't necessary, and won't give the desired result if you're expecting it to serialize the element or something. – user2736012 Sep 10 '13 at 18:09
it's for demonstrational purposes ;) – mo. Sep 10 '13 at 18:11
I didn't know about the string/number restriction. Changed it to work with strings only and it's good now, thanks! – idlackage Sep 10 '13 at 18:18
@idlackage: There is no string/number restriction. It'll accept any value that can be converted to a string, which in JavaScript is any value. It's just that you'll get the string conversion as the key. Also, this answer is still using the wrong type. The `Array` should not be used here. – user2736012 Sep 10 '13 at 18:27

Looping over associative array

2 Answers2