CODEWITHSUNDEEP
javascriptobjectfor-loopjavascript-objects
kingcobra1986
kingcobra1986

Reputation: 971

How do I loop through a JavaScript object but not act upon specific keys?

Lets say I have 3 JavaScript objects like this:

var obj_parent = {
    main: $("#parent_main_1"),
    tab: $("#parent_tab_1"),
    story: {
        main:$("#story_main"),
        tab: $("#story_tab")
    },
    recipe: {
        main: $("#recipe_main"),
        tab: $("#recipe_tab")
    },
    car: {
        main: $("#car_main"),
        tab: $("#car_tab")
    },
    animal: {
        main: $("#animal_main"),
        tab: $("#animal_tab")
    }
};

I would like to loop through this object to hide all of the "mains" of recipe, car, and animal objects. I would like to use a loop so if I needed to add another object, I wouldn't have to change the code. I am doing this to become more comfortable with objects. I know that if it was an array I could do this:

for ( var i = 3; i < obj_parent.length; i++) {
    obj_parent[i][0].hide();
}

Each of these objects will be different and the key words will not be the same so the next one could look like this:

var obj_parent2 = {
    main: $("#parent_main_1"),
    tab: $("#parent_tab_1"),
    earth: {
        main:$("#earth_main"),
        tab: $("#earth_tab")
    },
    moon: {
        main: $("#moon_main"),
        tab: $("#moon_tab")
    },
    computer: {
        main: $("#computer_main"),
        tab: $("#computer_tab")
    },
    building: {
        main: $("#building_main"),
        tab: $("#building_tab")
    }
};

I would like for it to be strictly javascript, not jQuery. I am trying to understand the language. Any help would be appreciated. Thank you!

Upvotes: 1

Views: 63

Answers (3)

kingcobra1986
kingcobra1986

Reputation: 971

With the help of @victorbahtev I ended up doing this 

function testing(obj){
    var i = 0;
    for(var key in obj){
        var prop = obj[key];
        if(prop && prop.main &&typeof(prop.main.hide) === 'function') {
            if (i !== 0) 
                prop.main.hide();
            else
                i++;
        }
    }
}

What I added to his code was the counter and then inside the if statement in the loop, I made it check the counter and skip the first one that popped up with a main property.

Upvotes: 0

Viktor Bahtev
Viktor Bahtev

Reputation: 4908

To iterate over the properties of an object you can use for .. in loop (MDN Docs). Since you want the solution to work with any object, you should include some duck typing and defensive programming - you should check if the desired properties/functions exist.

You can type something like this:

for(var key in obj_parent){
    var prop = obj_parent[key];

    // Check if the prop is truty, if it has a property with name main 
    // and if this main sub-property has function hide to avoid uncaught errors.
    if(prop && prop.main && typeof(prop.main.hide) === 'function') {
        prop.main.hide();
    }
}

Here is a JsFiddle Demo

Upvotes: 2

Chris Perkins
Chris Perkins

Reputation: 809

If you are learning, then for...in is what you are looking for. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

But, personally, I despise for loops of any type in non-utility code. As a reader of the program, I have to stop at each for loop and figure out why the author is looping. (To find something? To filter to a subset of results? To visit each and cause some action? To extract some data?). Far better is to use underscorejs (http://underscorejs.org). Each of those actions are explicit. (_.find, _.filter, _.each, _.map, _.pluck, etc)

_.each(obj_parent, function(key, value){  /* do something */ })

Upvotes: 0

Related Questions