javascript - JSONオブジェクトの要素をループして比較し、divの変更のみを表示する方法は?

Question

基本的に、div内のショッピングカートに商品を表示しようとしています。ショッピングカートは別の場所でホストされており、商品を取得するために、次のような json オブジェクトを返す getJSON リクエストを作成します。

{
"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 オブジェクトの最初の要素の名前を比較します。結果が true の場合、価格のみを更新し、名前は更新しません。結果が 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 をカートに追加する場合は、名前と価格を追加します
ユーザーが同じ商品 2 をカートに追加した場合、価格のみを更新します

これまでのところ、私のコードは 1 つの製品を追加して比較することしかできませんでした。連続したものではありません。私はまだ JavaScript に慣れていないので、私の方法がばかげている場合は、より良い方法を提案してください。

ありがとう！

score 0 · Accepted Answer

以下のコードは私がそれを行う方法です：

    //occurs when the element with id addCart is clicked
$("#addCart").click(function()
{
    //gets json of products
    $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&output=json&callback=?', function(data) 
    {
        //creates arrays to hold values
        var items = new Array();
        var names = new Array();
        var price = new Array();

        //foreach product in data name it item and do the following
        data.products.each(function(item){
            //See if the item id is in the items array
            var index = $.inArray(item.id, items);
            //If it isn't
            if(index == -1)
            {
                //Add the item to the arrays
                items.push(item.id);
                names.push(item.name);
                price.push(item.price);
            }
            //it already is in the array one time so just add to price
            else
            {
                //add to the price by the amount of the item price
                price[index] += item.price;
            }
        });

        //empty the html from the element with id cartContent 
        $('#cartContent').empty();
        //loop through all items in item array
        for (var i = 0; i < items.length ; i++) {
            //Add html for each item since we only added each once this happens once per item
            $('#cartContent').append('<p class="name">' + names[i] + '</p>' + '<p class="price">' + price[i] + '</p>');
        }
    });
});

score 0 · Accepted Answer

オブジェクト (他のプログラミング言語の HashMaps や連想配列に似ています) を使用して、現在のカートの状態を保存し、このオブジェクトを調べた後に将来のクリックに対応することができます。また、JavaScript オブジェクトでは提供されないため、現在の製品数を追跡する必要があります。値として何を保存するかはあなた次第です

//最初は空、または保存されたカートの状態に初期化できます。var cartProducts = {}, numProducts = 0;

$("#addCart").click(関数 () {

if (numProducts === 0) {
    //Here, create the DOM fragment representing your product.
    cartProducts["product-id"] = $("<div"); 

    numProducts += 1;

} else if(cartProducts["product-id"]) {
    //Update the product price since it has already been added to the DOM.

//When refactoring, combine this else statement with the first if condition.
} else {
    //At this point you know that the product has not been previously add it,
    //and can go ahead and add it to the DOM.

    //...
    numProducts += 1;        
}

});

コード構造に関する一般的なコメント:

コードにコメントを付けることで、他の人や将来あなたがコードを理解するのに役立ちます。
コードを、コードの小さなチャンクを担当する個別の関数にモジュール化するようにしてください。これは、コードの管理性、再利用性、およびテスト容易性に役立ちます。
[i->n; を反復する場合は、while ループの代わりに for ループを使用します。i++]。
コードをJSLintして、スタイリングと適切な構文を支援します。

これがあなたを助けることを願っています!

score 0 · Accepted Answer

おそらく、カートに追加する製品とその価格をマッピングする必要があります。

元：

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

または似たようなもの。

javascript - JSONオブジェクトの要素をループして比較し、divの変更のみを表示する方法は?

3 に答える 3

Related

Reference