JavaScript: indexOf in Associative/Object array?

Question

I have this array:

var skins = {};
skins.w = "http://example.com/public/images/char_elements/base.png";

var eyes = {};
eyes.b = "http://example.com/public/images/char_elements/eyes/blue.png";
eyes.g = "http://example.com/public/images/char_elements/eyes/green.png";
eyes.r = "http://example.com/public/images/char_elements/eyes/red.png";

var hair = {};
hair.b = "http://example.com/public/images/char_elements/hair/black.png";
hair.w = "http://example.com/public/images/char_elements/hair/blond.png";
hair.s = "http://example.com/public/images/char_elements/hair/brown.png";

var mouth = {};
mouth.h = "http://example.com/public/images/char_elements/mouth/happy.png";

var pants = {};
pants.s = "http://example.com/public/images/char_elements/pants/shorts.png";

var shoes = {};
shoes.b = "http://example.com/public/images/char_elements/shoes/black.png";

var torso = {};
torso.s = "http://example.com/public/images/char_elements/torso/shirt.png";

And this function:

function SwitchElement(type){
switch(type){

    case "eyes":
    var cur = eyes.indexOf(document.getElementById(type).src);
    console.log(cur);
//  var eyesId = document.getElementById("
    break;
}
}

And all this is called by:

<img class="builder_control_front" src="http://claro.mib.infn.it/arrow.png" onclick="SwitchElement('eyes');"/>

So basically when user clicks on arrow, it calls javascript function which gets current image loaded, get's index of array where element is located (in this case array: "eyes") and cycle through it.

I need to get index by url, when I try to use indexOf it throws Undefined, I read that JavaScript will convert array to Object if array has named indexes.

So chow can I get index of current loaded image?

Note: I NEED to have array with codes like: b, g, r, w, w4, b3 etc.. so Changing to normal array is not quite an option, perhaps changing to multidimensional array would be better?

you'd probably want to loop through the eyes like http://stackoverflow.com/questions/19969751/jquery-looping-each-json-key-value-not-working and do something like `for( var i in eyes ) { if (eyes[i] == document.getElementById(type).src) { cur = i; break; } }` or something like that — Dave Goten, Feb 20 '15 at 21:03
_" I read that JavaScript will convert array to Object if array has named indexes."_ Arrays _are_ objects. They can have named properties, but only the numerical indices correspond to the array elements. — JLRishe, Feb 20 '15 at 21:08

score 0 · Answer 1 · answered Feb 20 '15 at 21:04

Why not just iterate your object and find the key containing the value:

function findKey(obj, value) {
    for (var key in obj) {
        if (obj[key] == value) return key
    }
    return null;
}

var key = findKey(eyes, document.getElementById(type).src);
if (key != null) { 

} else {

}

score 0 · Answer 2 · answered Feb 20 '15 at 21:04

What you need is a reverse lookup. Assuming that all of your URLs are unique, you can create one like this:

function invert(obj) {
    var newObj = {};
    for(var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[obj[key]] = key;
        }
    }
}

var hair = {};
hair.b = "http://example.com/public/images/char_elements/hair/black.png";
hair.w = "http://example.com/public/images/char_elements/hair/blond.png";
hair.s = "http://example.com/public/images/char_elements/hair/brown.png";
var hairReverse = invert(hair);

var url = "http://example.com/public/images/char_elements/hair/black.png";
console.log(hairReverse[url]); // logs "b"

If you're using Lodash/Underscore, it has an invert function built in:

var hairReverse = _.invert(hair);

JavaScript: indexOf in Associative/Object array?

2 Answers2