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

Pablo Lozano · Accepted Answer · 2017-05-11 11:38:48Z

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

edited May 11, 2017 at 11:38

answered May 11, 2017 at 11:33

Pablo Lozano

10.4k2 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafa Mérida Over a year ago

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

Maxim Tkachenko · Accepted Answer · 2017-05-11 11:28:33Z

1

Use single javascript object instead:

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

edited May 11, 2017 at 11:28

answered May 11, 2017 at 11:27

Maxim Tkachenko

5,85610 gold badges43 silver badges76 bronze badges

Comments

Yury Tarabanko · Accepted Answer · 2017-05-11 11:32:26Z

1

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

answered May 11, 2017 at 11:32

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Comments

Mahfuzur Rahman · Accepted Answer · 2017-05-11 11:45:38Z

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

Collectives™ on Stack Overflow

JavaScript access to a dynamically created array object

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related