JSON parsing using jQuery in API html link

Question

I am trying to write a Jquery to Parse product information from an api.

<div id="placeholder"></div> script....

$.getJSON(data);
var output = "<ul>";
for (var i in data.products) {
output += "<li>" + data.products[i].sku + " " + data.products[i].name + "--" + 
data.products[i].salePrice + "</li>";
}
output += "</ul>";
document.getElementById("placeholder").innerHTML = output;`

when I give var data = {"products":[{"id_item":12324,"id_name":"canon"} it works but if I pass a link var data = "http://api.remix.bestbuy.com/v1/products(manufacturer=canon&salePrice%3C1000)?format=json&show=sku,name,salePrice&apiKey=<API_KEY> it does not work. I am a beginner and trying to learn JQUERY. Any kind of help will be appreciated...Is there any code debugger for Jquery... Thanks in advance...

This doesn't seem to be at all the right format. You need to pass a URL and a callback to getJSON, as described here: api.jquery.com/jQuery.getJSON. The passed URL will be fetched, and then once the URL is fetched, jQuery will call the callback function, the the fetched data as an argument. — Jeremy Blalock
– Jeremy Blalock, Commented Nov 20, 2013 at 23:29

dev · Accepted Answer · 2013-11-21 00:03:43Z

1

If you're setting the variable data for a URL and using that in the getJSON function then your data.products etc.. is not actually referencing anything because data is still pointing at your URL.

Take a look at the getJSON API Documentation but you'll need to do something like the below.

var url = "http://api.remix.bestbu....."
$.getJSON(url, function(data){
   var output = "<ul>";
   for (var i in data.products) {
      etc.....
});

EDIT

For JSONP you will need to specify the data type using the $.ajax function. I'm not aware of a way doing it with $.getJSON, someone correct me please if I;m wrong.

$.ajax({
   type:"GET",
   dataType: "JSONP",
   url: url,
   success:function(data){
      // .... Your function with the data. 
   }
});

edited Nov 21, 2013 at 0:03

answered Nov 20, 2013 at 23:54

dev

4,0093 gold badges26 silver badges36 bronze badges

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

10 Comments

Daedalus Over a year ago

This also appears to be JSONP.

dev Over a year ago

@Daedalus The documentation I linked is for the function $.getJSON which is what is being used. As far as I'm aware the code I've added for receiving JSONP data would work fine... please tell me where I went wrong? Plus I just noticed that the URL states JSON not JSONP, so I'm not even sure that JSONP is relevant here?

Daedalus Over a year ago

JSONP is for requests outside of the user's domain. As the user is using an API for an application that is not their own, there is no doubt it is JSONP. Due to the same-origin policy, one may not make ajax requests to urls outside of the domain the request originated from. This is where JSONP comes in; a callback variable is appended to the url of the request, which specifies a callback which is then used to retrieve the data.

dev Over a year ago

@Daedalus Thank you for clarifying but I know what JSONP is and why it's used :) I still fail to see why what I have written is incorrect? If for example in PHP where JSON data was to be returned like so echo $_GET['callback'].'('.$jsonData.')'; This returns the padded JSON data. So when making an AJAX call with dataType:'JSONP' this would get round any cross domain issues.

Daedalus Over a year ago

It would appear my memory is fuzzy; I really should squash the habbit of commenting on things I'd remember clearly; sorry for wasting your time.

|

Collectives™ on Stack Overflow

JSON parsing using jQuery in API html link

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related