Search code examples
jqueryjsonprogress

jQuery get percetage of loading json into array

I have this code on client side that reads json file:

/* PLAYLIST - total */
var total = 372 / Object.keys(res).length;

$.each(res, function(key, item) {
    $(".loader_bar").css("width", (total*key)+"px");
})

My progress bar is then filled to 100% (372px) but i did not see any progress of filling progressbar...so i think i need some timer or what element to calculate percetage when reading json from res object that is received from server and when res object is read to update progress bar...for example i have res.length of 3 items so my progressbar needs to be this way:

0%
33%
66%
100%

But i see only progress bar after waiting for some short time (eg. 10seconds) that it gets from 0% to 100% and no others values...so how can i archive above progress update every second so that i can see progress updating every second or every read item from json in $.each function?

Thanks.

Solution

  • The problem is your loop is too fast. Try this:

    $.each(res, function(key, item) {
   setTimeout(function(){
      $(".loader_bar").css("width", (total*key)+"px");
   }, 200);
});

    Play with the delay and see if you have the effect you expecting.

    Or use a plugin.