使用jQuery检测JSON数组中有多少元素发生了变化

Question

我对 Web 开发非常陌生，所以这对您来说可能看起来很简单：

我正在建造一堵墙，展示 100 幅微型风景图片的马赛克。我从仅包含 100 张最新上传的图片的远程 JSON 中获取这些图片的 URL，从最近的开始。该 JSON 会不断更新。

JSON 结构：

[
{
    "name": "Blue Mountains",
    "url": "http://foo.com/url-to-picture", // <- Most recent
    "location": "Canada"
},
{
    "name": "Yellow Lake",
    "url": "http://foo.com/url-to-picture", // <- Second most recent
    "location": "Greece"
}, ...
]

我想每 10 秒检查一次 JSON 并检测是否已上传新图片，如果是，我想知道有多少，然后用新图片替换墙上最旧的图片。

我真正能想到的是：

function getNewPictures() {
    $.getJSON("http://bar.com/url-to-json", function(result) {
        latest100 = result;
        checkIfNewPictures(); // I don't know how to do this
        old100 = latest100;
    });
}

setInterval(getNewPictures, 10000);

如您所见，我不知道如何比较 old100 和 latest100。我还想如果我可以将 X 新图片存储到另一个数组中对我来说会更容易，这样更新墙的过程会更容易。

实现这一目标最实用的方法是什么？

谢谢！

Answer 1

有几种方法可以解决，但我会这样做。

您正在使用的数据结构似乎不包含每张图片的唯一标识符。您需要一种方法来唯一标识每张图片，因此您必须创建一些东西。

假设您最初像这样输出图像：

$.getJSON("http://bar.com/url-to-json", function(result) {
    $.each(result, function(index, picture) {
        $('.wrapper').append("<img class='json-image' src='" + picture.url + "'/>");
    });
});

您还需要为每个元素指定一个唯一标识符，以便对其进行引用。

    ...
    $.each(result, function(index, picture) {
        var pictureID = picture.name + 'something' + picture.location;
        pictureID = pictureID.replace(' ','');
        $('wrapper').append("<img class='json-image' src='" + picture.url + "' id='" + pictureID + "'/>");
    });
    ...

这是一个功能，用于删除不在最新 json 中的图像。

function removeImages(json) {
    var newImageIDs = [];
    $.each(json, function(index, picture) {
        //make an array of all the new image ID's
        var pictureID = picture.name + 'something' + picture.location;
        pictureID.replace(' ','');
        newImageIDs.push(pictureID);
    });

    $('.json-image').each(function() {
        if ( newImageIDs.indexOf($(this).attr('id')) < 0 ) {
            //this image is no longer in the json, remove it
            $(this).remove();           
        }
    });
}

现在，当您获得最新的 JSON 时，您可以添加新的 JSON 并删除不再存在的 JSON。

$.getJSON("http://bar.com/url-to-json", function (result) {
    $.each(result, function (index, picture) {
        var pictureID = encodeURIComponent(picture.name + 'something' + picture.location);
        //only add new images
        if ( !$('#' + pictureID).length ) {
            $('.wrapper').append("<img class='json-image' src='" + picture.url + "' id='" + pictureID + "'/>");
        } 
    });
    removeImages(result);
});