jQuery object get value by key

Question

How would you get the value of assocIMG by key matching the key eg

if I have a var 11786 I want it to return media/catalog/product/8795139_633.jpg

var spConfig = {
    "attributes": {
        "125": {
            "id": "125",
            "code": "pos_colours",
            "label": "Colour",
            "options": [{
                "id": "236",
                "label": "Dazzling Blue",
                "price": "0",
                "oldPrice": "0",
                "products": ["11148"]
            }, {
                "id": "305",
                "label": "Vintage Brown",
                "price": "0",
                "oldPrice": "0",
                "products": ["11786", "11787", "11788", "11789", "11790", "11791", "11792", "11793"]
            }]
        }

    }
};
var assocIMG = // Added  - Removed { here, causes issues with other scripts when not working with a configurable product.
    {
        11786: 'media/catalog/product/8795139_633.jpg',
        11787: 'media/catalog/product/8795139_633.jpg',
    } 

Above is the objects I am working with and below is my current jQuery. Help would be greatly appreciated.

$('#attribute125').change(function() {
    var image = $(this).val();

    $.each(spConfig.attributes, function() {

        prods = $(this.options).filter( function() { return this.id == image; } )[0].products[0];

    alert(prods);

    });

});

Answer 1

You can use bracket notation to get object members by their keys. You have the variable prods containing a string ("11786"), and the object assocIMG with various keys. Then just use

assocIMG[prods]

to get the property value 'media/catalog/product/8795139_633.jpg' which is associated with that key.

Note that you should always use strings as keys in your object literal, IE does not support numbers there:

var assocIMG = {
    "11786": 'media/catalog/product/8795139_633.jpg',
    "11787": 'media/catalog/product/8795139_633.jpg'
};

---

Another improvement to your script would be not to loop through the spConfig.attributes each time, and potentially execute your action multiple times if an image is contained in more than one attribute. Instead, build a hash object out of it, where you can just look up the respective product id.

var productById = {};
$.each(spConfig.attributes, function() {
    $.each(this.options, function() {
         var id = this.id;
         productsById[i] = this.products[0];
    });
});

$('#attribute').change(function() {
    var id = this.value;
    var prod = productById[id];
    var image = assocIMG[prod];
    $("#product_img").attr("src", image);
});