JQuery object gets value by key

Question

How do you get the assocIMG value by the key corresponding to the key, for example

If I have 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 are the objects I'm 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 the parenthesis notation to get the members of an object by their keys. You have a prods variable containing a string ( "11786" ) and an assocIMG object with various keys. Then just use

 assocIMG[prods] 

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

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

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

---

Another improvement for your script would be to not use spConfig.attributes every time and potentially execute your action multiple times if the image is contained in multiple attributes. Instead, create a hash object from it, where you can simply find the corresponding product identifier.

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

Answer 2

You should not use numbers as keys of objects (at the beginning). If you want to get the value associated with the 11786 integer key, you will need to use this syntax:

 assocIMG["11786"] or assocIMG[11786] 

Not

 assocIMG.11786 

The first thing you need to do is create your keys as strings, since you would:

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

But even so, you won’t be able to access the field using assocIMG.11786 , and the first valid syntax I introduced will still work. The right approach:

 var assocIMG = { id11786: 'media/catalog/product/8795139_633.jpg', id11787: 'media/catalog/product/8795139_633.jpg', } 

or

 var assocIMG = { "id11786": 'media/catalog/product/8795139_633.jpg', "id11787": 'media/catalog/product/8795139_633.jpg', } 

Note that keys now begin with letters, not numbers. And now you can access field 11786 as assocIMG.id11786 or assocIMG["id11786"] , not assocIMG[id11786]

Answer 3

To get the value from the object by matching the key, I got the following

 $.each(assocIMG, function(index, value) { if(index == prods) { var image_path = value; $("#product_img").attr("src", image_path); //alert(image_path); }