JSON为日历中的每个URL调用Facebook的评论计数

时间:2011-05-15 17:01:13

标签: jquery facebook

我有一个jQuery日历,每天都链接到一个带有Facebook评论插件的动态页面。现在我可以通过这样调用Facebook的API获得评论数量:

    $(".comm").each(function(){
        var root = "https://graph.facebook.com/?ids=";
        var ids = "http://root.toUrl.com/";
        var callback = "&callback=?";
        var date = $(this).attr('href');
        var fecha = root + ids + date + callback;
        $.getJSON(fecha, function(data){
        for(comments_num in data){
        var user = data[comments_num];
        $('.iframecont').append(user.comments);
        console.log(user.comments);
}
});
});

Facebook允许您一次只通过一个URL通过Graph API获取评论数。因此,对于包含30天的日历,您必须调用30个网址才能获得每个网址响应。例如,要检索2011年5月5日的评论数,网址将为https://graph.facebook.com/?ids=http://root.toUrl.com/phpDynamicpageGenerator.php?date=2011-5-3&callback=?。我必须每天拨打相应的电话,解码答案并将结果附加到每天div内的p。

数据返回:

{
   "http://example.com/": {
      "id": "http://example.com/",
      "shares": 72603,
      "comments": 14483
   }
}

User.comments就是14483。

此代码正确检索数据,但现在每天'.iframecont'连续显示所有json响应,如下所示:62212221222...

如何将每个回复分发到其对应的div,以便将正确的评论数分配给正确的日期?

提前致谢。

1 个答案:

答案 0 :(得分:0)

假设以下html,

<div> <!-- div n-1 -->
<a href="someurl" class="comm">some text</a>
<p class="iframecont"></p>
</div>
<div> <!-- div n -->
<a href="someurl" class="comm">some text</a>
<p class="iframecont"></p>
</div>
<div> <!-- div n+1 -->
<a href="someurl" class="comm">some text</a>
<p class="iframecont"></p>
</div>

对于每个具有“commm”类的锚标记,您将提取属性“href”的值并进行api调用。 api调用返回一些json数据。你以某种方式解析它[看着你说的json返回,我不明白为什么你需要一个for循环以及为什么你在每次迭代时追加;但我现在会忽略它。现在您需要将其附加到相应的段落标记。

确定。所以重写你的功能如下

$(".comm").each(function(){
    var root = "https://graph.facebook.com/?ids=";
    var ids = "http://root.toUrl.com/";
    var callback = "&callback=?";
    var date = $(this).attr('href');

    // important. read http://bonsaiden.github.com/JavaScript-Garden/#function.this
    var $that = $(this);

    var fecha = root + ids + date + callback;

    $.getJSON(fecha, function(data){
        // why is this for loop needed?? 
        for(comments_num in data){
            var user = data[comments_num];
            console.log(user.comments);

            $that.parent().children("p.iframecont").append("num_of_comments");

            // OR you can use this
            // $that.siblings("p.iframecont").append("num_of_comments");
            // what to use will be decided by the exact structure of your html. 
            // check out http://api.jquery.com/category/traversing/
            // in my example, either method will work
        }
    });
});

注意事项。 $这只是另一个javascript变量。我们在$前面加上前缀来表示它的jquery对象。它的正常惯例。我们缓存对我们进行api调用的元素的引用。现在当回调函数执行时,使用缓存的$ that,我们找到相应的段落标记。在我的示例中,<a><p>都是<div>代码的子代。

您的html结构可能有所不同,因此请参阅http://api.jquery.com/category/traversing/并相应地修改遍历。

相关问题