2015-01-04 185 views
0

我一直在尝试从按照字母顺序输入/输入到HTML文档的JSON文档中获取数据。我发现堆栈溢出的类似请求;但是,在实现当前代码的解决方案时,JSON数据不会根据需要进行重组。按字母顺序排列JSON数据

当前的代码:

$(document).ready(function() { 

    //Content Viewer Information 
    function checkViewers() { 
    //Base Variables 
    var viewer = $('#viewed span.user'); 
    var totalViews = $('#viewed span.user').length; 
    var shortenViews = $('#viewed span.user').length -1; 

    if (totalViews === 0) { 
     $('<span> 0 people have </span>').insertBefore($('#viewed span:last-child')); 
    } 
    if (totalViews === 2) { 
     $('<span> and </span>').insertAfter(viewer.first()); 
    } 
    if (totalViews >= 3) { 
     viewer.slice(1).hide(); 
     $('<span> and </span>').insertAfter(viewer.first()); 
     $('<span class="user count"></span>').insertAfter(viewer.eq(2)); 
     $('.count').html(shortenViews + ' more people'); 
    } 
    } 

    //JSON Data 
    var xhr = new XMLHttpRequest(); 

    //Sort Alphabetically 
    function SortAlphabetically(a, b) { 
     a = a.toLowerCase(); 
     b = b.toLowerCase(); 

     return (a < b) ? -1 : (a > b) ? 1 : 0; 
    } 

    xhr.onload = function() { 
     if (xhr.status === 200) { 
      responseObject = JSON.parse(xhr.responseText); 

      var newViewers = ''; 
      for (var i = 0; i < responseObject.profiles.length; i++) { 
       newViewers += '<span class="user">' + responseObject.profiles[i].firstName + ' '; 
       newViewers += responseObject.profiles[i].lastName + '</span>'; 
       newViewers += ' '; 
      } 

      responseObject.profiles.sort(function(a, b) { 
       return SortAlphabetically(a.firstName, b.firstName);  
      }); 
      console.log('JSON Sorted'); 

      //Update Page With New Content 
      var viewerSection = $('#viewed'); 
      viewerSection.html(newViewers); 

     } 
    }; 

    xhr.open('GET', 'data.json', true); 
    xhr.send(null); 

    checkViewers(); 

}); 

我不知道该解决方案将是对这一问题的是什么,或者是否有可能是一个更好的方向与按字母顺序排序JSON数据去。任何意见或帮助表示赞赏。

查看当前的代码和示例Plunker

+0

您可以张贴了一下JSON对象?像responsObject.profiles数组? –

回答

1

你排序后您构建HTML数据。移动呼叫responseObject.profiles.sortfor以上循环:

//excerpt from the code you provided 
    //See the plunk for full code 
    xhr.onload = function() { 
     if (xhr.status === 200) { 
      responseObject = JSON.parse(xhr.responseText); 
      //SORT BEFORE GENERATING HTML 
      responseObject.profiles.sort(function(a, b) { 
       return SortAlphabetically(a.firstName, b.firstName);  
      }); 
      console.log('JSON Sorted');   
      var newViewers = ''; 
      for (var i = 0; i < responseObject.profiles.length; i++) { 
       newViewers += '<span class="user">' + responseObject.profiles[i].firstName + ' '; 
       newViewers += responseObject.profiles[i].lastName + '</span>'; 
       newViewers += ' '; 
      } 
     //End of excerpt 

Plunker:http://plnkr.co/edit/aW1rpiwu6OHiZj8QXA6D?p=preview

0

var objectArrayList = [{x:1,y:"Gazi"},{x:1,y:"Ahmet"},{x:1,y:"Fatih"},{x:1,y:"Ertuğrul"}]; 
 
objectArrayList .sort(function(x1,x2){return x1.y>x2.y;}); 
 
$(objectArrayList).each(function(x){ 
 
$("body").append(this.y+"<br>"); 
 
}); 
 
$("body").append("<b>REVERSE</b><br>"); 
 
var objectArrayList = [{x:1,y:"Gazi"},{x:1,y:"Ahmet"},{x:1,y:"Fatih"},{x:1,y:"Ertuğrul"}]; 
 
objectArrayList .sort(function(x1,x2){return x1.y<x2.y;}); 
 
$(objectArrayList).each(function(x){ 
 
$("body").append(this.y+"<br>"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body></body>