Json data fetch fail

Question

고정 JSON 파일을 데이터 소스로 사용하여 장바구니를 만듭니다. 이제 데이터를 가져 오면 제품 이름과 같은 가격이나 텍스트와 같은 다른 데이터와 대조적으로 이미지 만 렌더링됩니다. 여기

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

그리고 내 정적 JSON : 여기

내 코드입니다 내가 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" 
     } 
    ] 
} 

?

Answer 1

또한 여기

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>" 
    ); 
}); 

이 놀 수있는 jsFiddle입니다 value.price 등 value.title를 통해 필드에 액세스 할 수 있습니다 https://jsfiddle.net/tqxLaom7/2/ 당신은 콘솔의 출력을 볼 수 있습니다.

브라우저의 디버깅 도구로 얻은 개체를 확인해야합니다. 다음은 일반적인 설명입니다. http://www.w3schools.com/Js/js_debugging.asp

개발자 도구 사용 방법에 대한 자세한 내용은 사용하는 브라우저에 따라 다릅니다.