如何在同一页面上显示多个(但单独的)JSON请求

时间:2009-12-30 00:18:25

标签: javascript jquery json api

我有一个网页,我想在yelp.com API上为多家酒店显示酒店评论。

我已经设法为一家酒店做了这件事,它完美地显示了页面上特定酒店详细信息下的数据。但是,我现在如何将这个过程相乘,以便我对每个酒店都有单独的评论?

我的网页可以在http://dev.bhx-birmingham-airport.co.uk/pages/hotels.php看到,以了解我正在尝试做什么。

我目前使用的源代码如下:

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

2 个答案:

答案 0 :(得分:1)

你的问题有点不清楚。

我假设你想向Yelp发送多个请求,并让它们由不同的回调函数处理。

您可以通过创建一个buildCallback方法来实现这一点,该方法获取有关生成回调请求的信息并返回一个函数。

然后,您可以使用该函数的调用作为callback参数,如下所示:callback=buildCallback('something')它将返回如下所示的脚本:

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

此代码调用buildCallback方法,然后调用buildCallback方法返回的函数。

例如:
(假设每家酒店都有<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">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 + ")"
        );
    });
});

答案 1 :(得分:0)

您应该手动向Yelp服务发出多个请求,而不是在带有请求网址和回调函数名称的页面上插入脚本标记。

JQuery中的一个简单示例:

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

myhotels数组包含每个酒店的搜索参数。