Traversing an array using a Key?

[denhamd2]

Hi,

I'm a bit of a newbie with Javascript. I have an array called "Prods". Here are the different values in that array:

ProductName, HowManyCalories, ProductImage, LinkFromImage, Description, Price, BuyLink

There are a number of products. I'm just wondering how do I use "ProductName" as a product key to output its unique values?

Eg. the ProductName is "Chocolate Spread" - how do I output the "HowManyCalories" and "Product Image" only from the "Prods" array, based on the key "Chocolate Spread"?

Here's what I would like to do. I have the HTML:


<div><img src="" id="prodAimg"><br><span class="prodAname"></span><br><span class="prodAprice"</div><div><img src="" id="prodBimg"><br><span class="prodBname"></span><br><span class="prodBprice"</div><div><img src="" id="prodCimg"><br><span class="prodCname"></span><br><span class="prodCprice"</div>

I'm trying to use jquery to traverse the array and populate the above product images, names and prices with the values from the array, purely based on the
product names (ie. prodAname, prodBname, prodCname).

Sorry if this sounds confusing. Let me know what you think?

[jscheuer1]

In javascript we may employ an Array, which is an indexed array (denoted by square [] brackets), or an Object which is an associative array (denoted by curly {} brackets). Either can be a member of the other, and to a certain extent you may treat an associative array as an indexed array, you just have to be a bit clever or use a script library like jQuery that does some of the work for you.

So, say you have 3 products. Each product has a name, a color and a price. You could have an indexed array called products containing associative arrays, one for each product:


var products = [
{name: 'Large Polo', color: 'Green', price: '25.00'},
{name: 'Relaxed Fit Jeans', color: 'Blue', price: '35.00'},
{name: 'Wooden Hanger', color: 'Brown', price: '5.00'}
];

You could then iterate over the products Array and do something with each key in each product Object:


for(var i = 0; i < products.length; ++i){
document.write('<div>A ' + products[i].color + ' ' + products[i].name + ' is: $' + products[i].price + '</div>');
}

Output:


A Green Large Polo is: $25.00
A Blue Relaxed Fit Jeans is: $35.00
A Brown Wooden Hanger is: $5.00

[denhamd2]

Hi,

Sorry, yes it is an associative array just like the one you posted.

Rather than running through all the products, is it possible just to output the price of "Large Polo" and color of "Wooden Hanger" into separate variables?

Thanks for your help

[denhamd2]

ok here is where I'm at...



<script type="text/javascript">
var prods = [
{name: 'Dell XPS', color: 'Black', price: '650.00'},
{name: 'HP Pavilion', color: 'Pink', price: '550.00'},
{name: 'Sony Vaio', color: 'White', price: '800.00'}
];
for(i=0; i < prods.length; i++){
alert(prods[i]['name']); //displays the name value for each object
}
</script>

I need help writing a function that takes the name as an input and property name as output and when the name is found using something like the above code, return the associated property name's value for that name - any ideas?

[jscheuer1]

I think you want a multidimensional associative array and no indexed array:


<script type='text/javascript'>
var prods = {
'Dell XPS': {color: 'Black', price: '650.00'},
'HP Pavilion': {color: 'Pink', price: '550.00'},
'Sony Vaio': {color: 'White', price: '800.00'}
};

alert('$' + prods['Dell XPS'].price);
</script>

Note - For JSON (http://www.json.org/) compatibility should that need arise:


<script type='text/javascript'>
var prods = {
"Dell XPS": {"color": "Black", "price": "650.00"},
"HP Pavilion": {"color": "Pink", "price": "550.00"},
"Sony Vaio": {"color": "White", "price": "800.00"}
};

alert("$" + prods["Dell XPS"]["price"]);
</script>