按字母顺序组织 JSON 数据答案

【问题标题】：Organizing JSON Data Alphabetically按字母顺序组织 JSON 数据
【发布时间】：2015-01-04 01:02:29
【问题描述】：

我一直在尝试从 JSON 文档获取数据以按字母顺序输入/输入到 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。

【问题讨论】：

你能发布一些 json 对象吗？像 responsObject.profiles 数组一样？

标签： javascript jquery json sorting alphabetical

【解决方案1】：

您在构建 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

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

【讨论】：

【解决方案2】：

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>

【讨论】：