Databases
StackOverflow2013
Postsdbo
POHow to loop and compare elements in json object and only display changes in a div?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to loop and compare elements in json object and only display changes in a div?
    text
    copied!<p>Basically I'm trying to display the products in a shopping cart within a div. The shopping cart is hosted elsewhere and to retrieve the products, I make a getJSON request which returns a json object like this: </p> <pre><code>{ "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":[] } } </code></pre> <p>My current code, when a user clicks on Add to Cart, checks to see if the div is empty. If it is, it adds the first product from the json object. </p> <p>If the div isn't empty, then it compares the name of the first product in the div with the name of the first element in the json object. If the result is true, only update the price but not the name. If the result is false, it checks the next element in the json object. Here is my code:</p> <pre><code>$(document).ready(function() { var x=0; var y=0; $("#addCart").click(function() { if($('#cartContent').is(':empty')) { $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&amp;output=json&amp;callback=?', function(data) { $('#cartContent').append('&lt;p class="name"&gt;' + data.products[x].name + '&lt;/p&gt;' + '&lt;p class="price"&gt;' + data.products[x].price + '&lt;/p&gt;'); }); } else { $.getJSON('https://'+storedomain+'/cart?'+fcc.session_get()+'&amp;output=json&amp;callback=?', function(data) { $('.name').each(function() { while (y &lt; 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; }); }); } }); }); &lt;a id="addCart" href="http://mydomain.foxycart.com/cart?name=test-clothes&amp;price=10.00"&gt;Add to Cart&lt;/a&gt; &lt;div id="cartContent" style="display: inline; clear: both;"&gt;&lt;/div&gt; </code></pre> <p>This all works fine. My problem is I'v been testing for days but I can't come up with a method which can: </p> <ol> <li>If user adds product 1 to cart, append name + price</li> <li>If user adds same product 1 to cart, only update price</li> <li>If user adds product 2 to cart, append name + price</li> <li>If user adds same product 2 to cart, only update price</li> </ol> <p>So far, my code only manages to append and compare one product. Not consecutive ones. I'm still new to javascript and if my method is ridiculous, please help me suggest a better method. </p> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload