Jquery each not sorting json data in order

Question

I have a script that gets the data from a json call, and it works fine. The only problem is that it is coming in and displaying at random when using jquery each. The mysql query is fine, cause the json code outputs fine if I "SORT BY column_name ASC" or whatever.

here is the part:

success: function(viddata) {
    $.each(viddata.videos, function(i, video){
        $.getJSON("https://www.googleapis.com/youtube/v3/videos", {
            key: "mykey",
            part: "snippet,contentDetails,statistics",
            id: video
        }, function(data) {
            var duration = convert_time(data.items[0].contentDetails.duration);
            var views = data.items[0].statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            $(".bbox_content.bbox_videos .content_loader_container").remove(); 
            $(".bbox_content.bbox_videos").append($('<div class="bbox_item bbox_video_item" id=\"' + video + '\"><a class="video_item youtube_video" name=\"' + video + '\" href="/video/' + video + '" style="background-image:url('+ data.items[0].snippet.thumbnails.high.url +');"><span class="img"><img width="100%" src="/images/movie_arrow.png"/></span><span class="video_time">'+ duration +'</span></a>'+ viddata.controls +'<div class="bbox_video_item_info"><span class="video_title">'+ data.items[0].snippet.title +'</span><span class="view_count">Views: '+ views +'</span></div></div>').hide().fadeIn(800));
        });
    }

How can I sort this properly? Can someone please show me?

Thanks!

What is your issue? Why are you doing this

Derek Pollard
– Derek Pollard

2016-12-12 23:22:40 +00:00
Commented Dec 12, 2016 at 23:22 — Derek Pollard
– Derek Pollard, Commented Dec 12, 2016 at 23:22

user5051310 · Accepted Answer · 2016-03-04 04:46:59Z

getJSON makes an AJAX call to get the data. AJAX stands for Asynchronous Javascript And XML. Meaning, the requests are made sequentially, as you'd expect but, the 2nd or 3rd or nth request made could return before the previous request finishes. To test if this is happening to you, open developer console in your browser and look at the network activity (there should be a filter to view only XHR*. Use that)

The solution is to either not make a request until the previous request returns or append all the divs that need to be appended before hand and keep track of which request fills which div.

success: function(viddata) {

  $.each(viddata.videos, function(i, video) {
    var $videoDiv = $('<div id="' + video + '" style="display:none;"></div>').appendTo(".bbox_content.bbox_videos");

    $.getJSON("https://www.googleapis.com/youtube/v3/videos", {
        key: "mykey",
        part: "snippet,contentDetails,statistics",
        id: video
    }, function(data) {
        var duration = convert_time(data.items[0].contentDetails.duration);
        var views = data.items[0].statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        $(".bbox_content.bbox_videos .content_loader_container").remove(); 
        $videoDiv.addClass('bbox_item bbox_video_item')
          .append('<a class="video_item youtube_video" '
           + ' name="' + video + '" '
           + ' href="/video/' + video + '" '
           + ' style="background-image:url('+ data.items[0].snippet.thumbnails.high.url +');">'
             + '<span class="img">'
               + '<img width="100%" src="/images/movie_arrow.png"/>'
             + '</span>'
             + '<span class="video_time">'+ duration +'</span>'
           + '</a>'
           + viddata.controls
           + '<div class="bbox_video_item_info">'
             + '<span class="video_title">'
               + data.items[0].snippet.title
             + '</span>'
             + '<span class="view_count">'
               + 'Views: '+ views
             + '</span>'
           + '</div>')
          .fadeIn(800);
    });
}

I probably went a little overboard with the formatting but you gotta admit, it's easier to see what's going on.

*XHR: XmlHttpRequest

Collectives™ on Stack Overflow

Jquery each not sorting json data in order

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related