I have been searching and trying to understand how to change div's with help of javascript and use of timer, but dont quite get it.
I am working with a API that outputs json. At the moment i have managed to format it with my function, and given each "element" (job) a unique div to live in. What I'm trying to do now is do make a function that uses a timer to shows the content of each div. And it has to do it without any button clicks.
The if statement in my function is there just to limit the output.
My function:
function getAllOrdersAjax() {
$.get('/api/ordersystem', function(data){
var orderSystemDataAppendToView = [];
var i = 0;
$(data).each(function(key, value){
//Add's up the products sold to customer
for(var j = 0 in value['order_products'])
{
j++
}
//Sends the information to view
orderSystemDataAppendToView.push('<div id="product' + i + '"><h3> ID: ' + value['customer'].id + '</h3>' + '<p> Kundenavn: ' + value['customer'].name +
'</p>' + '<p> Selger: ' + value['sold_by'].firstname + ' ' + value['sold_by'].lastname + '</p>' +
'<p> Antall produkter solgt : ' + j + '</p>' + '<p> Pris : ' + value['price'] + '</p>' + '</div>');
if(i === 10){
return false;
}
i++;
});
$('#hei').html(orderSystemDataAppendToView).append();
})
}
For every job the div gets a id: product0, product1, product2, ....
How can i display these div's one after the other with at set interval in my index file. And how do i call the function then?
Thanks for all the help!