Jquery每个都没有按顺序排序json数据

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!

Answer 1

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