CODEWITHSUNDEEP
javascriptarrays
Rafa Mérida
Rafa Mérida

Reputation: 97

JavaScript access to a dynamically created array object

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...

Upvotes: 1

Views: 121

Answers (4)

Mahfuzur Rahman
Mahfuzur Rahman

Reputation: 1545

<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>

Upvotes: 1

Pablo Lozano
Pablo Lozano

Reputation: 10342

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

Upvotes: 1

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

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

Upvotes: 1

Maxim Tkachenko
Maxim Tkachenko

Reputation: 5798

Use single javascript object instead:

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

Upvotes: 1

Related Questions