Detect how many elements have changed in JSON array with jQuery

Question

I'm very new to web development, so this may seem trivial to you:

I'm building a wall that displays a mosaic of 100 miniatures of landscape pictures. I get the URLs of these pictures from a remote JSON which only contains the 100 latest uploaded pictures, starting from the most recent. That JSON is constantly updated.

JSON structure :

[
{
    "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"
}, ...
]

I'd like to check the JSON every 10 seconds and detect if new pictures have been uploaded and, if so, I'd like to know how many and then replace the oldest pictures from the wall by the new ones.

All I could really come up with is this:

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);

As you can see, I have no clue as to how I could compare old100 and latest100. I also suppose it'd be easier for me if I could store the X new pictures into another array so that the process of updating the wall would be easier.

What would be the most practical way to achieve this?

Thanks!

Thanks for the tip. However, as I said, I'm very new to web development and I'd like to learn as much as possible without relying on too many frameworks so that I can get the logic behind what I do. :-) — Stephanie D.
– Stephanie D., Commented Jun 26, 2014 at 20:29

pmandell · Accepted Answer · 2014-06-26 20:55:44Z

3

There are a few ways to go about it, but here is how I would do it.

It appears that the data structure you are working with does not contain a unique identifier for each picture. You will need a way to uniquely identify each picture, so you will have to create something.

Say you are outputting the images initially like this:

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

You will also need to give each element a unique identifier so that it can be referred to.

    ...
    $.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 + "'/>");
    });
    ...

Here is a function to remove the images that are not in the latest 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();           
        }
    });
}

Now, when you get the latest JSON you can add the new ones and remove ones that no longer exist.

$.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);
});

edited Jun 26, 2014 at 20:55

answered Jun 26, 2014 at 20:32

pmandell

4,31820 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephanie D. Over a year ago

Thank you for your answer! I think it may work for my very specific problem. However, it does not seem like this code would actually compare the new JSON and the old one? For my own learning, is there a way to do it? And is it possible to store only the URLs of the pictures that exists in the new JSON but not in the old one in an array?

Stephanie D. Over a year ago

Also, it appears I can ask for each picture's unique identifier in my request, which returns an ID for every one of them. However, the IDs do not follow each other: the most recent pic can have a smaller ID than the second most recent.

pmandell Over a year ago

Essentially you are comparing the new with the old. The old data is directly reflected in the DOM since you are making an element (img) for each object.

Collectives™ on Stack Overflow

Detect how many elements have changed in JSON array with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related