jQuery inserting JSON value to element with specific class

Question

I'm have a little trouble with some jQuery I have been trying to put together today.

Basically what I am trying to achieve is to dynamically have prices inserted into a price button on my page by reading from a JSON feed.

The idea is that there is an empty span that will contain the price. I have given all of the price spans the class .getPriceNew. Each span also has an id which is equal to the SKU number for the item like this <span class="getPriceNew" id="123456"></span>.

The mechanic is that for each span that has the class .getPriceNew the JSON will be queried for the information with the SKU id used as part of the query string.

Here is an example of the code i have tried

jQuery

$(".getPriceNew").each(function() {
    var sku = $(this).attr("id");
    var priceNew = $.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
            return(data.Variants[0].Price);
            });
    $(this).html("&euro;"+priceNew);        
})

HTML

<span class="getPriceNew" id="123456"></span>
<span class="getPriceNew" id="789123"></span>
<span class="getPriceNew" id="456789"></span>
<span class="getPriceNew" id="654321"></span>

JSON Example This is what a single item from the JSON feed would look like - I have filtered it a little /api/MyApi.svc/GetProductBySku/123456

Updated with valid JSON

 {
    "Age": {
        "Description": "Age 18+",
        "Thumbnail": "http://someurl.com/productImages/assets/img//icon18.gif"
    },
    "Barcode": {
        "Barcode": "5026555408684"
    },
    "Description": "HTML",
    "Id": 12214,
    "Packshots": [
        "http://someurl.com/productImages/914383/1min.jpg",
        "http://someurl.com/productImages/914383/2med.jpg",
        "http://someurl.com/productImages/914383/3max.jpg"
    ],
    "Pegis": [],
    "Platform": {
        "Button": "Format",
        "ID": 0
    },
    "Publisher": {
        "Description": null
    },
    "Release": "/Date(1364252400000+0100)/",
    "Screenshots": [],
    "Title": "Product Title",
    "Variants": [
        {
            "Id": 22488,
            "MaxOrderQuantity": 3,
            "Presellable": true,
            "Price": 49.97,
            "Sku": 914383,
            "Type": {
                "Description": "Pre-Order"
            }
        }
    ],
    "Vendor": {
        "Description": "Take Two Interactive Software"
    },
    "VideoHTML": "HTML",
    "status": {
        "Response": "product found",
        "Success": true
    }
}

I would love some help on this as I am really scratching my newbie head at this stage. I have managed to have console.log output the prices to the log but when I try and insert them back into the spans all I get is [object] [Object].

You have to serialize to JSON object. Look stackoverflow.com/questions/191881/… and stackoverflow.com/questions/3593046/jquery-json-to-string — SimaWB
– SimaWB, Commented Feb 20, 2013 at 15:46

Jeff · Accepted Answer · 2013-02-20 17:14:34Z

1

You are doing

$(".getPriceNew").each(function() {
    var sku = $(this).attr("id");
    var priceNew = $.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
            return(data.Variants[0].Price);
            });
    $(this).html("&euro;"+priceNew);        
})

getJSON returns a jqXHR object, which is not what you need. Try this:

$(".getPriceNew").each(function() {
    var sku = $(this).attr("id");
    // Save a refference to this span.
    var thisSpan = $(this);
    $.getJSON('/api/MyApi.svc/GetProductBySku/'+sku , function(data) {
            // Request complete, NOW we can use the data we got!
            thisSpan.html("&euro;"+data.Variants[0].Price); 
    });

})

The callback is where you want to use the data you get from your AJAX calls. All AJAX methods ($.ajax, $.get, $.post, $.getJSON, etc) will return a jqXHR object.

edited Feb 20, 2013 at 17:14

answered Feb 20, 2013 at 15:45

Jeff

12.2k14 gold badges85 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

founddrama Over a year ago

Yes, jQuery.getJSON returns a jqXHR (which -- side note -- is a Deferred implementation). So +1: the updates need to happen in the callback.

Darragh Verschoyle Over a year ago

Okay, thanks for the tip. Seems I am having a little trouble now with my $(this).html("€"+data.Variants[0].Price); It does not seem to be setting the HTML for each of the .getPriceNew spans. Is it possible that it `this' is no longer that jquery object?

Darragh Verschoyle Over a year ago

Indeed I just checked and now $(this) is the JSON and no longer the span selector. Any tips on how to structure this so that I can still insert my price?

Darragh Verschoyle Over a year ago

@Jeff this is what I came up with - seems to work so far

$(".getPriceNew").each(function() {     var sku = $(this).attr("id");     $.getJSON('/api/AthenaService.svc/GetProductBySku/'+sku , function(data) {             // Request complete, NOW we can use the data we got!             $(".getPriceNew:first").html("&euro;"+data.Variants[0].Price).attr("class", "");      });  });

Vermicello · Accepted Answer · 2013-02-20 16:08:57Z

0

I think your javascript code is correct but your Json output has two errors: 1: "Description":"Some HTML Description here, <- you forgot the closing quote 2: "ID":0}, <- delete the closing brace

So your Json will result like this:

{
"Age": {
    "Description": "Age 18+",
    "Thumbnail": "http://url.com/image.gif"
},
"Barcode": {
    "Barcode": "4876416541647"
},
"Description": "Some HTML Description here",
"Id": 12214,
"Packshots": [
    "http: //url.com/productImages/914383/1min.jpg",
    "http: //http: //url.com/2med.jpg",
    "http: //http: //url.com/3max.jpg"
],
"ID": 0,
"Publisher": {
    "Description": null
},
"Release": "/Date(1364252400000+0100)/",
"Screenshots": [],
"Title": "Titleoftheproduct",
"Variants": [
    {
        "Id": 22488,
        "MaxOrderQuantity": 3,
        "Presellable": true,
        "Price": 49.97,
        "Sku": 914383,
        "Type": {
            "Description": "Pre-Order"
        }
    }
],
"Vendor": {
    "Description": "Vendorname"
},
"VideoHTML": "&lt;iframewidth=&quot;725&quot;height=&quot;408&quot;src=&quot;http: //www.youtube.com/embed/videoseries?list=PLofwA47XDv2_KnfUY52_8mlWg0iUEv8ci&quot;frameborder=&quot;0&quot;allowfullscreen&gt;&lt;/iframe&gt;",
"status": {
    "Response": "productfound",
    "Success": true
}  }

now your code

data.Variants[0].Price

will return 49.97 to validate Json you can paste it into http://jsonlint.com/ i think is very useful

Hope this helps

answered Feb 20, 2013 at 16:08

Vermicello

3081 gold badge6 silver badges11 bronze badges

2 Comments

Darragh Verschoyle Over a year ago

Thanks for the suggestion. I'm pretty sure I just butchered the JSON when I pasted it in here. I just ran the live JSON through JSONlint and it validated

Darragh Verschoyle Over a year ago

I have updated the JSON example to have valid code. Thanks for pointing out the error.

Collectives™ on Stack Overflow

jQuery inserting JSON value to element with specific class

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related