How can I display multiple (but seperate) JSON requests on the same page

Question

I have a web page where I want to display hotel reviews from the yelp.com API for a number of hotels.

I have managed to do this for one hotel, and it works perfectly displaying the data under that specific hotel's details on the page. However, how can I now multiply this process so that I have separate reviews for each hotel?

My web page can be seen at http://dev.bhx-birmingham-airport.co.uk/pages/hotels.php to get an idea of what I'm trying to do.

The source code I am using so far looks like:

<script>
function showData(data) {
$.each(data.businesses, function(i,business){
        // extra loop
        $.each(business.reviews, function(i,review){ 
            var content = '<p>Review - ' + review.text_excerpt + ' <a href="http://www.yelp.co.uk/biz/hilton-birmingham-metropole-hotel-solihull"&gt;Read more...</a></p>';
            content += 'Rating - <img src="' + business.rating_img_url + '" />';
            content += '<p>Date Added - ' + review.date + '</p>';
            $(content).appendTo('#hilton');
        });
    });      
}


$(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=[...]"+
    "&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 1

Instead of inserting a script tag on the page with the request url and a callback function name, You should make multiple requests to Yelp services manually.

A simple example in JQuery:

function LoadReviews() {
    for (var i = 0; i < myhotels.length; i++) {
        $.getJSON("http://api.yelp.com/business_review_search?" + myhotels[i], null, showData);
    }
}

Where the myhotels array contains the search parameters for each of your hotels.

Answer 2

Your question is somewhat unclear.

I assume that you want to send multiple requests to Yelp and have them processed by different callback functions.

You can do that by making a buildCallback method that takes information about the request to generate a callback for and returns a function.

You can then use an invocation of that function as the callback parameter, like this: callback=buildCallback('something') It will return a script that looks like this:

buildCallback('something')({"message: ... })

This code calls the buildCallback method, then calls the function that the buildCallback method returns.

For example:
(Assuming that each hotel has a <div class="HotelReviews" id="giveThisToYelp">)

function buildCallback(hotelName) {
    return function(data) {
        $.each(data.businesses, function(i,business){
            // extra loop
            $.each(business.reviews, function(i,review){ 
                var content = '<p>Review - ' + review.text_excerpt + ' <a href="http://www.yelp.co.uk/biz/hilton-birmingham-metropole-hotel-solihull"&gt;Read more...</a></p>';
                content += 'Rating - <img src="' + business.rating_img_url + '" />';
                content += '<p>Date Added - ' + review.date + '</p>';
                $(content).appendTo('#' + hotelName);
            });
        });
    };
}

$(function() {
    $('.HotelReviews').each(function() {
        $.getScript("http://api.yelp.com/business_review_search?"+
            "term=" + this.id + 
            "&location=B26%203QJ"+
            "&ywsid=[...]"+
            "&callback=buildCallback(" + this.id + ")"
        );
    });
});