CODEWITHSUNDEEP
javascriptjqueryjsonsortingalphabetical
Andrew
Andrew

Reputation: 241

Organizing JSON Data Alphabetically

I have been troubleshooting trying to get data from a JSON document to be entered/inputted into a HTML document in alphabetical order. I found similar requests on stack overflow; however, when implementing a solution into the current code, the JSON Data is not reorganized as desired.

The current code:

$(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();

});

I am not sure what the solution would be to this problem, or if there might be a better direction to go with sorting JSON Data alphabetically. Any advice or help is appreciated.

View the current code and example Plunker.

Upvotes: 0

Views: 967

Answers (2)

Mesut &#199;AKIR
Mesut &#199;AKIR

Reputation: 61

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>

Upvotes: 0

Max Heiber
Max Heiber

Reputation: 15502

You're sorting the data after you build the HTML. Move the call to responseObject.profiles.sort above the for loop:

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

Upvotes: 1

Related Questions