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

Now having added &callback=? to the end of the URL, I see the text 'undefined' in my page. I guess this means I', not pointing to the correct part of the data. — Simon Cooper
– Simon Cooper, Commented Dec 29, 2009 at 18:41

General Grievance · Accepted Answer · 2025-10-30 13:11:00Z

6

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.

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

<script src="http://code.jquery.com/jquery-latest.js"></script>

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

edited Oct 30 at 13:11

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Dec 29, 2009 at 15:01

Jared

8,6506 gold badges40 silver badges43 bronze badges

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

2 Comments

Chris Over a year ago

Would be great if Yelp had a public jsonp API to test out fesibility of certain things.

jrutter Over a year ago

Nice script - why do you write out the script tags? Is there an advantage of doing that

rfunduk · Accepted Answer · 2009-12-29 15:01:11Z

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.

Alpha Codemonkey · Accepted Answer · 2009-12-30 16:08:55Z

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){
    ...
});

VoY · Accepted Answer · 2009-12-29 14:59:03Z

0

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.

answered Dec 29, 2009 at 14:59

VoY

5,7292 gold badges41 silver badges47 bronze badges

1 Comment

Simon Cooper Over a year ago

cross-domain is not an issue.

deostroll · Accepted Answer · 2009-12-29 14:52:08Z

-1

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

answered Dec 29, 2009 at 14:52

deostroll

12k22 gold badges94 silver badges168 bronze badges

Collectives™ on Stack Overflow

Trying to use jQuery to display JSON text data

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related