Javascript Looping through object values and changing the css based on value

Question

I am writing a script that loops through an object to first get the elements and then I am trying to loop through the value of the elements so i can change the CSS. Here is the script:

$(document).ready(function() {
var carParts = {
    doors: {
        flDoor: 'LOCKED',
        blDoor: 'LOCKED',
        frDoor: 'LOCKED',
        brDoor: 'LOCKED'
    }
}
var lights = 'OFF';
if (lights === 'OFF') {
    $('.lights').css("display", "none");
}

for(var i in carParts.doors) {
    for(var key in carParts.doors) {
        var value = carParts.doors[key];
        console.log(value);
        if (value === 'locked') {
            $('.'+i+'-open').css("display", "none");
        }
    }
}
})

So i want to loop through the carparts.door object and get the actual flDoor, blDoor, frDoor, brDoor. These names are needed in the final jquery line to assign the proper class name. I don't want that line to fire unless the actual value is locked though. I'm newer to javascript and still learning. I appreciate any feedback you have on the code.

var lights = 'OFF'; if (lights === 'OFF') should just be if(true) ;) — Bojangles
– Bojangles, Commented May 16, 2013 at 14:36
And you seem to be comparing uppercase LOCKED against the string locked within the for...in loop: JavaScript is case-sensitive, you need to pay attention to that (or use .toLowerCase() in string-comparisons). — David Thomas
– David Thomas, Commented May 16, 2013 at 14:37
Awesome thanks, I changed those aspects. Now with the proper case in the loop statement I was expecting it to one by one do the check and change the css. It looks as if it is going through and if any one of the values is LOCKED it is assigning everything a display: none style. — user2112618
– user2112618, Commented May 16, 2013 at 14:41

score 1 · Accepted Answer · 2013-05-16 14:48:48Z

1

Working FIDDLE Demo

The LOCKED is in uppercase. You are comparing with the lowercase. Try this:

if (value === 'LOCKED') {
    //
}

And why you have two loops? One is enough.

HTML

<div class="flDoor-open">flDoor</div>
<div class="blDoor-open">blDoor</div>
<div class="frDoor-open">frDoor</div>
<div class="brDoor-open">brDoor</div>

JavaScript

$(function () {
    var carParts = {
        doors: {
            flDoor: 'OPENED',
            blDoor: 'OPENED',
            frDoor: 'LOCKED',
            brDoor: 'LOCKED'
        }
    };

    for (var key in carParts.doors) {
        var value = carParts.doors[key];

        if (value === 'LOCKED') {
            $('.' + key + '-open').css("display", "none");
        }
    }
});

edited May 16, 2013 at 14:48

answered May 16, 2013 at 14:40

user1823761

Sign up to request clarification or add additional context in comments.

2 Comments

user2112618 Over a year ago

thanks as well, David above you said the same thing and I commented if anyone else has any other thoughts.

user2112618 Over a year ago

That worked perfectly thank you. As I said a bit new to javascript so working out the best method for the code and how to write it still is difficult. This solution fixed everything and If i could rate up I would.

Collectives™ on Stack Overflow

Javascript Looping through object values and changing the css based on value

1 Answer 1

HTML

JavaScript

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

JavaScript

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related