Блог

Я создаю корзину покупок, используя статический 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 :

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

Чего мне не хватает для отображения остальных JSON данных?

Вы также можете получить доступ к полям через value.title, value.price и т. Д.

  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, с которым можно поиграть: https://jsfiddle.net/tqxLaom7/2 /
Вы можете увидеть вывод в консоли.

Вы должны проверить полученный объект с помощью инструментов отладки вашего браузера. Вот общее объяснение: http://www.w3schools.com/Js/js_debugging.asp

В зависимости от используемого браузера вы можете прочитать больше о том, как использовать инструменты разработчика.