title: Organizing JSON Data Alphabetically
body: <p>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.</p>
  
  <p>The current code:</p>
  
  <pre><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) {
          $('&lt;span&gt; 0 people have &lt;/span&gt;').insertBefore($('#viewed span:last-child'));
      }
      if (totalViews === 2) {
          $('&lt;span&gt; and &lt;/span&gt;').insertAfter(viewer.first());
      }
      if (totalViews &gt;= 3) {
          viewer.slice(1).hide();
          $('&lt;span&gt; and &lt;/span&gt;').insertAfter(viewer.first());
          $('&lt;span class="user count"&gt;&lt;/span&gt;').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 &lt; b) ? -1 : (a &gt; b) ? 1 : 0;
      }
  
    xhr.onload = function() {
        if (xhr.status === 200) {
            responseObject = JSON.parse(xhr.responseText);
  
            var newViewers = '';
            for (var i = 0; i &lt; responseObject.profiles.length; i++) { 
                newViewers += '&lt;span class="user"&gt;' + responseObject.profiles[i].firstName + ' ';
                newViewers += responseObject.profiles[i].lastName + '&lt;/span&gt;';
                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();
  
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>View the current code and example <a href="http://plnkr.co/edit/zE1kv1Z04TqG8W2vCJqA?p=preview" rel="nofollow">Plunker</a>.</p>