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>

• adeneo: It's asynchronous, so when you are trying to use the values, the ajax function has'nt completed yet, and there are no values to show !

Answer 1

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

• Aamer: How can I delayed the call to productRendering() so that it only gets executed once the ajax callback completes.

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');

• Kevin B: This isn't a requirement. jQuery will take the text returned and assume it's JSON since he's using getJSON. Though, it isn't a bad idea to use anyway.