按字母顺序组织 JSON 数据

Question

我一直在解决问题，试图将 JSON 文档中的数据按字母顺序 entered/inputted 放入 HTML 文档中。我在堆栈溢出上发现了类似的请求；但是，在当前代码中实施解决方案时，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。

Answer 1

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>

Answer 2

您在构建 HTML 之后 对数据进行排序 。将调用移至 for 循环上方的 responseObject.profiles.sort：

  //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

笨蛋：http://plnkr.co/edit/aW1rpiwu6OHiZj8QXA6D?p=preview

按字母顺序组织 JSON 数据

Organizing JSON Data Alphabetically

javascript

sorting

jquery

json

alphabetical