在必要时部分加载jSON数据

时间:2014-03-19 11:46:47

标签: javascript jquery ajax json

我试图制作无限滑块。想法很简单:

假设我们在jSON数组中有10个元素。

首先加载3个元素以显示,经过一段时间滑块下降后,我们加载第4个元素来显示它,使用.remove()方法删除第1个元素。然后我们进一步,加载第5个元素,删除第2个,依此类推。当我们到达第10个元素时,我们加载第1个元素并删除第8个,所以它循环。 1-> 2-> 3-> ...... - > 10-> 1-> 2-> ......

现在我需要一些帮助来编写代码。我想得到一个我可以放在setInterval()中的函数。 jSON代码如下:

{"comments":
[
    {
        "comment_body":"To jest pierwszy komentarz.",
        "comment_user":"Jan Kowalski",
        "comment_avatar":"https:\/\/img.com\/img.png",
        "comment_from":"FB",
        "comment_url":"https:\/\/facebook.com\/121234"
    },
    {
        "comment_body":"To jest drugi komentarz.",
        "comment_user":"Jan Kupka",
        "comment_avatar":"https:\/\/img.com\/img.png",
        "comment_from":"TW",
        "comment_url":"https:\/\/twitter.com\/121234"
    },
    {   "comment_body":"A to jest trzeci komentarz.",
        "comment_user":"Jan Kowalski",
        "comment_avatar":"https:\/\/img.com\/img.png",
        "comment_from":"FB",
        "comment_url":"https:\/\/twitter.com\/121234"
    },
    {   "comment_body":"Kolejny komentarz.",
        "comment_user":"Jan Kucharski",
        "comment_avatar":"https:\/\/img.com\/img.png",
        "comment_from":"TW",
        "comment_url":"https:\/\/twitter.com\/121234"
    }
]
}

获取它的功能:

$.getJSON("js/comments.js", function(data) {

    $.each(data.comments, function(i, data) {

        var $comment_div = "<div class='comment'><p class='comment-text'>"+data.comment_body+"</p><img class='comment-photo' src='"+data.comment_url+"'/><a rel='"+data.comment_from+"' class='name' href='"+data.comment_url+"'>"+data.comment_user+" via <i class='fa'></i></a></div>";

        $($comment_div).appendTo('#comments-content');

    });
});

此代码加载jSON文件的全部内容并在网站上显示。但我想实现上面所写的内容,但我不知道该怎么做。

我希望你能提前帮助我。

干杯!

2 个答案:

答案 0 :(得分:0)

让我们假设你在comment.js中有类似的东西

var comments = {"comments" : [....]};
var count = 3;

然后你需要添加

return comments["comments"].slice(begin, begin + count);

并且您的获取功能变为,每次通话后开始更改

$.getJSON("js/comments.js", {begin: start}, function(data) {

UPD。

var resComments = comments["comments"].slice(begin, begin + count);
return JSON.stringify({"comments" : resComments});

答案 1 :(得分:0)

var comments = yourJSON.comments;
var index = 0;
var comments.length; // Not sure if that exists but you'll figure it out.

var inter = setInterval( function() { // No need to save return value if it never stops.

   // Do stuff using comments [i]

   index  = (index + 1) % max;

}, 5000 );