javascript - 如何循环比较json对象中的元素并只显示div中的变化？

Question

基本上，我试图在 div 内显示购物车中的产品。购物车托管在其他地方并检索产品，我发出一个 getJSON 请求，该请求返回一个如下所示的 json 对象:

{
"products":[
    {
        "id": "3045365",
        "name": "Test Product",
        "code": "foo123",
        "image": "",
        "url": "",
        "length": "0",
        "width": "0",
        "height": "0",
        "options": {"color":"red"},
        "quantity": 1,
        "price_each": 10,
        "price": 10,
        "weight_each": 1,
        "weight": 1,
        "shipto": "",
        "category": "DEFAULT",
        "sub_frequency": "",
        "sub_startdate": "0000-00-00",
        "sub_nextdate": "0000-00-00",
        "sub_enddate": "0000-00-00"
    },
    {
        "id": "3045366",
        "name": "Second Product",
        "code": "bar456",
        "image": "",
        "url": "",
        "length": "0",
        "width": "0",
        "height": "0",
        "options": {},
        "quantity": 1,
        "price_each": 100,
        "price": 100,
        "weight_each": 1,
        "weight": 1,
        "shipto": "",
        "category": "DEFAULT",
        "sub_frequency": "",
        "sub_startdate": "0000-00-00",
        "sub_nextdate": "0000-00-00",
        "sub_enddate": "0000-00-00"
    },
    {
        "id": "3045367",
        "name": "Example Subscription",
        "code": "xyz456",
        "image": "",
        "url": "",
        "length": "0",
        "width": "0",
        "height": "0",
        "options": {"color":"red"},
        "quantity": 1,
        "price_each": 6,
        "price": 6,
        "weight_each": 4,
        "weight": 4,
        "shipto": "",
        "category": "DEFAULT",
        "sub_frequency": "1m",
        "sub_startdate": "2010-10-15",
        "sub_nextdate": "2010-11-15",
        "sub_enddate": "2013-01-01"
    }
],
"product_count": 3,
"total_item_price": 116,
"total_discount": -5,
"total_price": 111,
"total_weight": 6,
"session_id": "9bpdjvm2ju0bulm6d7kkcf6d31",
"coupons":{
    "test2":{
        "id":"201",
        "name":"test for line item coupon discount",
        "discount":-5}
},
"custom_fields":{
    "my_hidden_value":"I'm hidden!",
    "example_hidden":"value_1"
},
"messages":{
    "errors":[],
    "warnings":[],
    "info":[]
}
}

我当前的代码，当用户单击“添加到购物车”时，检查 div 是否为空。如果是，它会添加 json 对象中的第一个产品。

如果 div 不为空，则会将 div 中第一个产品的名称与 json 对象中第一个元素的名称进行比较。如果结果为真，则仅更新价格而不更新名称。如果结果为 false，则检查 json 对象中的下一个元素。这是我的代码:

$(document).ready(function()
{

var x=0;
var y=0;

$("#addCart").click(function()
{

    if($('#cartContent').is(':empty'))
    {
        $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&output=json&callback=?', function(data) 
        {
            $('#cartContent').append('<p class="name">' + data.products[x].name + '</p>' + '<p class="price">' + data.products[x].price + '</p>');      
        });
    }
    else 
    {
    $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&output=json&callback=?', function(data) 
    {
            $('.name').each(function()
            {   
                while (y < data.products.length-1)
                {   
                    if($(this).text() === data.products[x].name)
                    {   
                        $('.price').eq(x).text(data.products[x].price);     
                    }   
                    x++;
                    y++;
                }
                x=0;
                y=0;
            });
            });
    }               
});
});

<a id="addCart" href="http://mydomain.foxycart.com/cart?name=test-clothes&price=10.00">Add to Cart</a>
<div id="cartContent" style="display: inline; clear: both;"></div>

这一切都运行良好。我的问题是我已经测试了好几天，但我无法想出一种方法可以:

1. 如果用户将产品 1 添加到购物车，请附加名称 + 价格
2. 如果用户将相同的产品 1 添加到购物车，则仅更新价格
3. 如果用户将产品 2 添加到购物车，请附加名称 + 价格
4. 如果用户将相同的产品 2 添加到购物车，则仅更新价格

到目前为止，我的代码只能添加和比较一个产品。不是连续的。我对 javascript 还很陌生，如果我的方法很荒谬，请帮我建议一个更好的方法。

谢谢!

Answer 1

也许您需要映射添加到购物车的产品及其价格。

例如:

<div class="product">
    Prod 1 
    <div class="product-price">100</div>
</div>

<script>
    var productNames = [];

    function checkExisting(name) {
        return !(productNames.indexOf(name) < 0);
    }

    function appendProduct(name, price) {
        var p = $('<div>' + name + '<div>' + price + '</div></div>');
        p.data('name', name);
    }

    $(addToCart).click(function() {
        var products = $('.product');

        products.each(function() {
            if( checkExisting($(this).data('name')) ) {
                productNames.push($(this).data('name'));
            }
        });

        $.getJSON(bla, function(data) {
            for(var i = 0; i < data.products.length; i++) {
                 if(checkExisting(data.products[i].name)) {
                     appendProduct();
                 }
                 else {
                     updatePrice();
                 }
            }
        });
    });
</script>

或者类似的东西。