Question

我一直在尝试从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。

Answer 1

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

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

Answer 2

＆＃13;

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>");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

＆＃13;

按字母顺序组织JSON数据

2 个答案: