Question

I am working on an e-commerce website. There is an array “products” in javascript defined by the following code

<script type="text/javascript">
    var products = 
    [
         {"id":"1","title":"Apple iPhone 4"},
         {"id":"2","title":"BlackBerry 9780 Bold"}
    ];
    /*some other javascript code*/
</script>

I want this array to be updated dynamically according to the number of rows returned by querying the database.
For example, suppose I query the database and 5 rows are returned. I want this array to be updated with those 5 rows. Please help me getting this done. I am using PHP, MySQL, Apache on Windows machine.

Answer 1

You want the push function: http://www.w3schools.com/jsref/jsref_push.asp

var products = 
[
     {"id":"1","title":"Apple iPhone 4"},
     {"id":"2","title":"BlackBerry 9780 Bold"}
];

// Let's add a new phone:
products.push({"id":"3","title":"HTC Evo"});

/*
    products now equals: 
    [
         {"id":"1","title":"Apple iPhone 4"},
         {"id":"2","title":"BlackBerry 9780 Bold"},
         {"id":"3","title":"HTC Evo"}
    ];
*/

To account for the possibility you may have an existing array and you’d like to update it via ajax, you can do this dynamically with PHP:

<script type="text/javascript">
<?php foreach($phones as $phone): ?>
    products.push({"id":"<?=$phone['id']?>","title":"<?=$phone['name']?>"});
<?php endforeach; ?>
</script>