Trying to use jQuery to display JSON text data

Question

I know very little (none) JavaScript, or much about using API's. However I would like to display some hotel reviews on my webiste made available over the qype.com API. However I'm struggling with being able to manage this.

This is the code I have so far:

$(document).ready( function() {
  $.getJSON( "http://api.yelp.com/business_review_search?term=hilton%20metropole&location=B26%203QJ&ywsid=APIKEY Removed",
    function(data) {
      $.each( data.businesses, function(i,businesses) {
        content = '<p>' + businesses.reviews.text_excerpt + '</p>';
        content = '<p>' + businesses.reviews.date + '</p>';
        $(content).appendTo("#review");
      } );
    }
  );
} );

I have a div in the body called review where I want to display the text.

Any advice greatly received.

JSON can be found at http://api.yelp.com/business%5Freview%5Fsearch?term=hilton%20metropole&location=B26%203QJ&ywsid=lOoGGbkYpVmTvxHlWGT2Lw

Also, I have multiple businesses on the same page, how would I make use of this multiple times on the same page, but output the data in different locations?

Answer 1

Do you get an error in Firebug using this code? What happens exactly?

I expect this problem is caused by the fact that you're trying to do a cross-domain request which is not allowed. Normally you'll want to do this kind of data gathering on your back-end, but you can use an alternative such as JSONP to do the same.

Take a look at jQuery's documentation on this stuff and it should be clear what's going on.

Also, as a side note: In your callback you have content = which is ok but not ideal. Assigning to content like this will create a variable in the global scope which you do not want. In this case it probably wont cause an issue but say you have 2 of these requests going at once, the second assignment could easily step on the first causing hard-to-debug weirdness. Best to just always create variables with var.

Answer 2

I assume you must be experiencing part of your data (which you are supposed to see) disappearing. I think you must edit your code to:

content = '<p>' + businesses.reviews.text_excerpt + '</p>';
content += '<p>' + businesses.reviews.date + '</p>';

Hope this helps...

Answer 3

The problem is that you are making a cross domain request, which is not allowed for security purposes. Either you will have to make a proxy script on your domain (like for example in php) and call yelp from that or fetch the data completely on the server side.

Answer 4

Update: Ah, I see your error now. businesses.reviews is an array (each business can have more than one review) so you have to loop over each business and each business' reviews.

i had to change some things to get it to run in my test bed, but you can see a sample of this code running here: http://bit.ly/4mTxPp

yelp currently support JSONP calls so you can change your code to:

<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

<script>
function showData(data) {
    $.each(data.businesses, function(i,business){
        // extra loop
        $.each(business.reviews, function(i,review){ 
            var content = '<p>' + review.text_excerpt + '</p>';
            content += '<p>' +review.date + '</p>';
            $(content).appendTo('#review');
        });
    });      
}


$(document).ready(function(){
    // note the use of the "callback" parameter
    writeScriptTag( "http://api.yelp.com/business_review_search?"+
    "term=hilton%20metropole"+
    "&location=B26%203QJ"+
    "&ywsid=lOoGGbkYpVmTvxHlWGT2Lw"+
    "&callback=showData"); // <- callback
});

function writeScriptTag(path) {
    var fileref = document.createElement('script');
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", path);

    document.body.appendChild(fileref);
}
</script>

Answer 5

If data.businesses is an array, I would assume that data.businesses[x].reviews is also an array. This code loops the businesses as well as the reviews for each business. It also gets rid of the content variable by appending straight to the #review div.

$.each(data.businesses, function(i,business){
    $.each(business.reveiws, function(r,review){
        $("#review").append(
         '<p>' + review.text_excerpt + '</p>'
        ).append(
         '<p>' + review.date + '</p>'
        );
   });
});

I think you can specify JSONP with your $.getJSON method by adding "callback=?" to the url parameters.

As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?"

$.getJSON("http://api.yelp.com/business_review_search?term=hilton%20metropole&location=B26%203QJ&ywsid=APIKEY Removed&callback=?",
  function(data){
    ...
});