Json Data Fetch fehlgeschlagen

Question

Ich baue einen Einkaufswagen mit einer statischen JSON Datei als Datenquelle. Jetzt, wenn meine Daten abgerufen werden, werden nur die Bilder im Gegensatz zu den anderen Daten wie Preise und Text wie der Produktname gerendert.

Hier ist mein Code:

$(document).ready(function() { 
    $.getJSON('feed.json') 
     .done(function(data) { 
      // Define wine bottle Variables. 
      var allBooks = []; 
      var x = 0; 
      $.each(data.books, function(key, value) { 
       x++; 
       allBooks.push(
        "<div class='col-sm-12 col-md-8 col-lg-4 thumbnail products'>" + 
        "<h3>" + data.books[key].title + "</h3>" + "<img class='bottles' src='" + data.books[key].imageUrl + "'>" + "<p id='" + x + "'>$" + data.books[key].price + ".00</p>" + "<input type='button' class='" + x + " btn btn-success' value='Add to Cart'>" + "</div>" 
       ); 
      }); 

      var emptyCart = document.createElement("input"); 
      emptyCart.setAttribute("class", "btn btn-danger empty"); 
      emptyCart.setAttribute("type", "button"); 
      emptyCart.setAttribute("value", "Empty Cart"); 
      var empty = document.getElementById("empty"); 
      empty.appendChild(emptyCart); 
      $("#books").html(allBooks); 

      // Cart functionality 
      $('#empty').hide(); 
      var myCart = 0; 
      var price = 0; 
      var cartContent = document.getElementById("cartContent"); 
      var cartValue = document.getElementById("cartValue"); 

      var priceArr = []; 
      cartContent.innerHTML = myCart; 
      cartValue.innerHTML = "$ " + price + ".00"; 

      $(".0").click(function() { 
       var item = document.getElementById(0).innerHTML; 
       priceArr.push(parseFloat(item.substring(1, item.length))); 
       price = priceArr.reduce(function(prev, current) { 
        return prev + current 
       }) 
       $('#empty').fadeIn(300); 
       myCart = priceArr.length; 
       cartContent.innerHTML = myCart; 
       cartValue.innerHTML = "$ " + price + ".00"; 
      }); 
      $(".1").click(function() { 
       var item = document.getElementById(1).innerHTML; 
       priceArr.push(parseFloat(item.substring(1, item.length))); 
       price = priceArr.reduce(function(prev, current) { 
        return prev + current 
       }) 
       $('#empty').fadeIn(300); 
       myCart = priceArr.length; 
       cartContent.innerHTML = myCart; 
       cartValue.innerHTML = "$ " + price + ".00"; 
      }); 
      $(".2").click(function() { 
       var item = document.getElementById(2).innerHTML; 
       priceArr.push(parseFloat(item.substring(1, item.length))); 
       price = priceArr.reduce(function(prev, current) { 
        return prev + current 
       }) 
       $('#empty').fadeIn(300); 
       myCart = priceArr.length; 
       cartContent.innerHTML = myCart; 
       cartValue.innerHTML = "$ " + price + ".00"; 
      }); 
      $(".3").click(function() { 
       var item = document.getElementById(3).innerHTML; 
       priceArr.push(parseFloat(item.substring(1, item.length))); 
       price = priceArr.reduce(function(prev, current) { 
        return prev + current 
       }) 
       $('#empty').fadeIn(300); 
       myCart = priceArr.length; 
       cartContent.innerHTML = myCart; 
       cartValue.innerHTML = "$ " + price + ".00"; 
      }); 

      // empty cart 
      $("#empty").click(function() { 
       myCart = 0; 
       price = 0; 
       priceArr = []; 
       cartContent.innerHTML = myCart; 
       cartValue.innerHTML = "$ " + price + ".00"; 
       $("#empty").fadeOut(400); 
      }) 
     }) 
     .fail(function(error) { 
      console.log("error" + error) 
     }) 
     .always(function() { 
      console.log("finished") 
     }); 
}) 

Und hier ist meine statische JSON:

{ 
    "books":[ 
     { 
      "title": "Brediecker", 
      "price": 23, 
      "imageUrl": "images/wine.png" 
     }, 
     { 
      "title": "Chardonnay", 
      "price": 19, 
      "imageUrl": "images/growse.jpg" 
     }, 
     { 
      "title": "Gewurztraminer", 
      "price": 26, 
      "imageUrl": "images/riesling.jpg" 
     }, 
     { 
      "title": "Pinot", 
      "price": 215, 
      "imageUrl": "images/pinot.jpg" 
     }, 
     { 
      "title": "Pinot", 
      "price": 215, 
      "imageUrl": "images/pinot.jpg" 
     } 
    ] 
} 

Was bin ich, um fehlt den Rest JSON Daten zu machen?

Answer 1

Sie können auch die Felder über value.title zugreifen, value.price usw.

var allBooks = []; 
var x = 0; 
$.each(data.books, function(key, value) { 
    x++; 
    allBooks.push(
    "<div class='col-sm-12 col-md-8 col-lg-4 thumbnail products'>" + 
    "<h3>" + value.title + "</h3>" + "<img class='bottles' src='" + value.imageUrl + "'>" + "<p id='" + x + "'>$" + value.price + ".00</p>" + "<input type='button' class='" + x + " btn btn-success' value='Add to Cart'>" + "</div>" 
    ); 
}); 

hier ein jsFiddle ist um zu spielen: https://jsfiddle.net/tqxLaom7/2/ Sie die Ausgabe in der Konsole sehen können.

Sie sollten das Objekt überprüfen, das Sie mit den Debugging-Tools Ihres Browsers erhalten. Hier ist eine allgemeine Erklärung: http://www.w3schools.com/Js/js_debugging.asp

Je nach Browser, den Sie verwenden, können Sie mehr über die Verwendung der Entwickler-Tools lesen.