How should I loop through and "associative object" in javascript?

Question

I have an object this.themeData something like this (console output shown)

Object
    Banner: Object
        property: "null"
        raw: "uploads/1/somefile.png"
        selector: "null"
        value: "../../uploads/1/somefile.png"
        __proto__: Object
    H1_FontSize: Object
    H2_FontColor: Object
    H2_FontSize: Object

and I loop through like this:

    for (attrName in this.themeData) {
        attrData = this.themeData[attrName];
        if (attrData.selector && attrData.value) {
            $(".SomeSelector").css(attrData.property, attrData.value);
        }
    }

This works, but I saw in a recent SO question that I shouldn't use for in. But how can I loop through if the indexes are not numeric values for(var i = 0; i<arr.length; i++) where this.themeData[i] doesn't exist ?

It seems you did not read the whole answer in the other question... it thoroughly describes how to iterate over objects and what the gotchas are. Everything that is mentioned in these answers here (the use of `hasOwnProperty`) is explained in greater detail there as well. — Felix Kling, Aug 31 '12 at 10:52

score 2 · Accepted Answer · answered Aug 31 '12 at 10:50

It's fine to use for..in loops on Objects, you just need to filter them with a hasOwnProperty() check

for (attrName in this.themeData) {
    if (this.themeData.hasOwnProperty(attrName)) {
        attrData = this.themeData[attrName];
        if (attrData.selector && attrData.value) {
            $(".SomeSelector").css(attrData.property, attrData.value);
        }
    }
}

score 2 · Answer 2 · answered Aug 31 '12 at 10:51

Using the for...in method is fine in my opinion, just be sure to check that the properties you're looking for aren't from somewhere up the prototype chain.

var foo = Object();
for(item in foo) {
  if(foo.hasOwnProperty(item) {
      alert(item); // The key
      alert(foo[item]); // The value.
  }
}

If you don't check hasOwnProperty, you'll end up with properties inherited from Object.

How should I loop through and "associative object" in javascript?

2 Answers2