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

Question

我有一个网页，我想在其中显示来自 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>

Answer 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 + ")"
        );
    });
});

Answer 2

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

JQuery 中的一个简单示例：

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

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