JSON data not loading with jQuery

Question

I want to load numerous products into a section of the page uaing data from a JSON file. I have got it to work using JavaScript, but I would prefer to use jQuery. There are no errors in the console, yet the data isn't loading. I am using Bootstrap. Relatively new to Ajax/JSON.

HTML

<div class="cat-group">
    <div id="content"></div>
</div

CSS

.cat-group { overflow: hidden; }

jQuery

$(function(){

 function loadProducts() {                    
   $.getJSON('products.json')              
   .done( function(data){                      
     products = data;                            
  }).fail( function() {                       
   $('#content').html('Sorry! We could not load our products at the moment. Try again later!');
 });
}

loadProducts();                                      

$(window).on('load', function(){  

var newContent = '';                               // Build up timetable by
for (var i = 0; i < products.length; i++) {      // looping through events
    newContent += '<div class="col-lg-3 col-md-4 col-xs-6">';
    newContent += '<a class="thumbnail">';
    newContent += '<h4>SKU: <span>' + products[i].product + '</span></h4>';
    newContent += '<img class="img-responsive" src="' + products[i].img + '">';
    newContent += '</a>';
    newContent += '</div>'; 
}

    $('#content').html(newContent);

  });

})

JSON file

 {
 "products": [
 {
 "product": "product1",
 "price": "10",
 "sku": "1",
 "img": "img/prod-1.jpg"
 },
 {
 "product": "product2",
 "price": "12",
 "sku": "2",
 "img": "img/prod-2.jpg"
 },
 {
 "product": "product3",
 "price": "13",
 "sku": "3",
 "img": "img/prod-3.jpg"
 },
 {
 "product": "product3",
 "price": "14",
 "sku": "4",
 "img": "img/prod-4.jpg"
 }
 ]
 }

@NitinDhomse wrong choice of words. I meant the content (imgs, text) isn't loading in the browser — Patrick McDermott
– Patrick McDermott, Commented Jul 14, 2016 at 11:41

Anuj Kumar · Accepted Answer · 2016-07-14 11:37:32Z

I have made some changes in your code, Try this

$(function(){

            function loadProducts() {                    
                $.getJSON('products.json')              
                .done( function(data){                      
                    products = data.products;
                    renderProducts();
                }).fail( function() {                       
                    $('#content').html('Sorry! We could not load our products at the moment. Try again later!');
                });
            }

            loadProducts();                                      


        });


        function renderProducts() {

            var newContent = '';                               // Build up timetable by
            for (var i = 0; i < products.length; i++) {      // looping through events
                newContent += '<div class="col-lg-3 col-md-4 col-xs-6">';
                newContent += '<a class="thumbnail">';
                newContent += '<h4>SKU: <span>' + products[i].product + '</span></h4>';
                newContent += '<img class="img-responsive" src="' + products[i].img + '">';
                newContent += '</a>';
                newContent += '</div>';
            }

            $('#content').html(newContent);
        }

ed4becky · Accepted Answer · 2016-07-14 11:36:18Z

0

You are treating the returning data as if it were an array of products, but it is really an object containing an array of products. try products = data.products; instead of products = data;

answered Jul 14, 2016 at 11:36

ed4becky

1,6302 gold badges21 silver badges58 bronze badges

Comments

Sourav Mukherjee · Accepted Answer · 2016-07-14 11:36:53Z

0

Try this one. just replace products = data with products = data.d;

$(function(){

 function loadProducts() {                    
   $.getJSON('products.json')              
   .done( function(data){                      
     products = data.d;                            
  }).fail( function() {                       
   $('#content').html('Sorry! We could not load our products at the moment. Try again later!');
 });
}

answered Jul 14, 2016 at 11:36

Sourav Mukherjee

711 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

JSON data not loading with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related