Question

Given the simple JSON below, how can I use jQuery to append each result one by one into the DOM?

Each new result should have 3 seconds delay before it is added to the DOM, and the process should loop through over and over again (I will have the oldest one removed at certain point).

Here’s what should have happen:

<div class="001"><p>text</p></div>

<!-- (3 seconds delay than add) -->
<div class="002"><p>text</p></div>

<!-- (3 seconds delay than add) -->
<div class="003"><p>text</p></div>

<!-- (3 seconds delay than add the first one back in if there is no more) -->
<div class="001"><p>text</p></div>

—- json data —–

{
    "results": [
        {
            "id": 001,
            "text": "text one",
        },
        {
            "id": 002,
            "text": "text two",
        },
        {
            "id": 003,
            "text": "text three",
        }
    ]
}

Answer 1

Here’s a function that would add data to a parent with a given delay (in milliseconds) between the additon of each item:

function addDataWithDelay(parent, data, delay) {
    var index = 0;
    function add() {
        if (index < data.length) {
            var item = data[i];
            $(parent).append('<div class="' + item.id + '"><p>' + item.text + '</p></div>');
            ++index;
            setTimeout(add, delay);
        }
    }
    add();
}

parent is the parent element or selector that you want the items appended to

data is the array of objects that have id and text properties – in your case this would be the results array

delay is the amount of time in milliseconds between each add