JavaScript access to a dynamically created array object

Question

I created a list of arrays dynamically, which has the following syntax:

<script>
 var item1001 = new Array();
 item1001[0] = 1001; //id
 item1001[1] = "Item name";
 item1001[2] = 500; //item price
 item1001[3] = "http://whatever"; //item page link
 var item1002 = new Array();
 item1002[0] = 1002; //id
 item1002[1] = "Item name";
 item1002[2] = 600; //item price
 item1002[3] = "http://whatever"; //item page link
 var item1003 = new Array();
 item1003[0] = 1003; //id
 item1003[1] = "Item name";
 item1003[2] = 700; //item price
 item1003[3] = "http://whatever"; //item page link
...
</script>

Now I have a form with a SELECT populated with all the items:

<select name="items" id="items">
<option value="1001">Item name</option>
<option value="1002">Item name</option>
<option value="1003">Item name</option>
...
</select>

Just wanted to retrieve the item price when the select changes, to make some calculations with JavaScript:

jQuery( "#items" ).change(function() { 
 var myItemPrice="item"+Number(jQuery( "#items" ).val()+"[2]");
 console.log("Item price: "+myItemPrice);
 var total = Number(myItemPrice - (myItemPrice*5)/100);
 console.log("Total: "+total);
});

But I don't know how to access the array, i.e. "item1001[2]" dinamically, based upon "select" value...

Answer 1

Just for the sake of showing how to access to a variable as a window's attribute:

var item1001 =[];
item1001[0] = 1001; //id
item1001[1] = "Item name";
item1001[2] = 500; //item price
item1001[3] = "http://whatever"; //item page link
var item1002 = [];
item1002[0] = 1002; //id
item1002[1] = "Item name";
item1002[2] = 600; //item price
item1002[3] = "http://whatever"; //item page link
var item1003 = [];
item1003[0] = 1003; //id
item1003[1] = "Item name";
item1003[2] = 700; //item price
item1003[3] = "http://whatever"; //item page link
jQuery( "#items" ).change(function() { 
 var myItemPrice="item"+jQuery( "#items" ).val();
 console.log("Item price: "+myItemPrice);
 var total = window[myItemPrice][2];
 console.log("Total: "+total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="items" id="items">
<option value="1001">Item name</option>
<option value="1002">Item name</option>
<option value="1003">Item name</option>
...
</select>

But you could just store your items in an object or an array:

var items= {
 "1001": ["Item name", 500],
 "1002": [...],
 ...
}

And your event handler would be much easier:

jQuery( "#items" ).change(function() { 
 var myItem=jQuery( "#items" ).val();
 console.log("Item price: "+items[myItem][1]);
});

• Rafa Mérida: Just used the hint: window[myItemPrice][2]; ...and worked as expected. I know there are a lot of ways to improve my code, thank you very much to you all!!

Answer 2

Use single javascript object instead:

var items = {};
items["1001"] = {name: "...", price: 100};
items["1005"] = {name: "...", price: 500};
var price = items[$('#items').val()].price;
..

Answer 3

You can use window to access global scope.

window['item' + $(this).val()][2]

But better restructure your initial data. You can use object to store data

var items = {
 1001: { id: 1001, name: '', price: 100},
 1002: { id: 1002, name: '', price: 100}
}
var price = items[$(this).val()].price

Answer 4

<select name="items" id="items">
<option value="1001">Item name</option>
<option value="1002">Item name</option>
<option value="1003">Item name</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 var item = {
 1001 :{id:"1001", name:"Item name", price: 500, url:"http://whatever"},
 1002 :{id:"1002", name:"Item name", price: 600, url:"http://whatever"},
 1003 :{id:"1003", name:"Item name", price: 700, url:"http://whatever"}
 };
$( "#items").change(function(){
 var myItemPrice = item[$("#items").val()].price;
 console.log("Item price: "+myItemPrice);
 var total = myItemPrice - (myItemPrice*5)/100;
 console.log("Total: "+total);
});
</script>