Question

我想将大量产品加载到页面的一部分，从JSON文件中获取数据。我已经使用JavaScript工作，但我更喜欢使用jQuery。控制台中没有错误，但数据未加载。我正在使用Bootstrap。相对较新的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文件

 {
 "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"
 }
 ]
 }

Answer 1

我在代码中做了一些更改，试试这个

$(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);
        }

Answer 2

您将返回的数据视为一个产品数组，但它实际上是一个包含产品数组的对象。尝试 products = data.products; 代替 products = data;

Answer 3

试试这个。只需用products = data.d替换products = data;

$(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!');
 });
}

JSON数据未加载jQuery

3 个答案: