drduinfu915094
2016-03-04 03:18
浏览 127
已采纳

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

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!

图片转代码服务由CSDN问答提供 功能建议

我有一个从json调用中获取数据的脚本,它运行正常。 唯一的问题是,当每个使用jquery时它会进入并随机显示。 mysql查询没问题,因为如果我“SORT BY column_name ASC”或其他什么,json代码输出正常。

这里是部分:

   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($('&lt; div class =“bbox_item bbox_video_item”  id = \“'+ video +'\”&gt;&lt; a class =“video_item youtube_video”name = \“'+ video +'\”href =“/ video /'+ video +'”style =“background-  image:url('+ data.items [0] .snippet.thumbnails.high.url +');“&gt;&lt; spa  n class =“img”&gt;&lt; img width =“100%”src =“/ images / movie_arrow.png”/&gt;&lt; / span&gt;&lt; span class =“video_time”&gt;'+ duration +'  &lt; / span&gt;&lt; / a&gt;'+ viddata.controls +'&lt; div class =“bbox_video_item_info”&gt;&lt; span class =“video_title”&gt;'+ data.items [0] .snippet.title +  '&lt; / span&gt;&lt; span class =“view_count”&gt;观看次数:'+ views +'&lt; / span&gt;&lt; / div&gt;&lt; / div&gt;')。hide()。fadeIn(800))  ; 
}); 
} 
   
 
 

如何正确排序? 有人可以告诉我吗?

谢谢!

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzhi7082 2016-03-04 04:46
    已采纳

    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

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题