JSON-Daten werden nicht mit jQuery geladen

Question

Ich möchte zahlreiche Produkte in einen Abschnitt der Seite laden, die Daten aus einer JSON-Datei enthält. Ich habe es mit JavaScript zu arbeiten, aber ich würde lieber jQuery verwenden. In der Konsole sind keine Fehler vorhanden, die Daten werden jedoch nicht geladen. Ich benutze Bootstrap. Relativ neu zu 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 Datei

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

Ich habe einige Änderungen im Code gemacht, versuchen Sie diese

$(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

Sie behandeln die zurückkehrenden Daten, als ob es sich um eine Reihe von Produkten waren, aber es ist wirklich ein Objekt eine Reihe von Produkten enthalten. versuchen Sie products = data.products; anstelle von Produkte = Daten;

Answer 3

Versuchen Sie diese. Ersetzen Sie einfach 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!'); 
}); 
}