Passing a JSON array from PHP to JQuery is not working

Question

I am having trouble accesssing a jquery array which is getting JSON data from a PHP script. If I hard coded the array in jquery it worked fine. I checked using cosole.log. Both nproducts and products array giving the same values. Please note that nproduct has hard coded values where are product is getting from a PHP script. Can someone put my in the right direction. Thanks

here is the PHP Code

while ($row = oci_fetch_array($result,OCI_ASSOC)) {
    $shop[$row['WH_DESCRIPTION']] = array( 
        'pic' => $row['WH_PIC'],
        'price' => $row['WH_PRICE']
      );
} 

echo json_encode($shop);

here is the jquery. If I use nproduct then productsRendering function works fine but if I use product then it print containsValue for name and pic and undefined for price. It seems that the product array does not have any values in the productRendering function where as getJSON is returning values.

<script type="text/javascript">
    var cart = (function ($) {

        var productsOffset = 3, products = [], 
            nproducts = {
                'Black T-shirt': {
                    pic: 'black-controller.png',
                    price: 15
                },
                'Green T-shirt': {
                    pic: 'green-kentucky.png',
                    price: 18
                },
                'Brown T-shirt': {
                    pic: 'brown-computer.png',
                    price: 25
                }

            };

         $.getJSON('shop.php', function(data) {
              products = data;
              console.log(data);       //showing values here
              console.log(products);   //showing values here
              console.log(nproducts);  //showing values here
          });

        function render() {
            productsRendering();
        };

        function productsRendering() {
            var catalog = $('#catalog'),
                imageContainer = $('</div>'),
                image, product, left = 0, top = 0, counter = 0;
                console.log(products);   //does not have values here
            for (var name in products) {
                product = products[name];
                image = createProduct(name, product);
                image.appendTo(catalog);
                if (counter !== 0 && counter % 3 === 0) {
                    top += 147; // image.outerHeight() + productsOffset;
                    left = 0;
                }
                image.css({
                    left: left,
                    top: top
                });
                left += 127; // image.outerWidth() + productsOffset;
                counter += 1;
            }
            $('.draggable-demo-product').jqxDragDrop({ dropTarget: $('#cart'), revert: true });
        };

        function createProduct(name, product) {
            return $('<div class="draggable-demo-product jqx-rc-all">' +
                    '<div class="jqx-rc-t draggable-demo-product-header jqx-widget-header-' + theme + ' jqx-fill-state-normal-' + theme + '">' +
                    '<div class="draggable-demo-product-header-label"> ' + name + '</div></div>' +
                    '<div class="jqx-fill-state-normal-' + theme + ' draggable-demo-product-price">Price: <strong>$' + product.price + '</strong></div>' +
                    '<img src="images/t-shirts/' + product.pic + '" alt='
                    + name + '" class="jqx-rc-b" />' +
                    '</div>');
        };

        function init() {
            render();
        };

        return {
            init: init
        }
    } ($));

    $(document).ready(function () {
        cart.init();
    });
</script>

Answer 1

productsRendering() gets called before ajax request completes. Consider calling productsRendering() inside the ajax callback.

Answer 2

This is because the browser does not interpret the response body as JSON. Try setting Content-Type header in php before echoing response:

header('Content-Type', 'application/json');