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 ?

Answer 1

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);
        }
    }
}