Sort and print JSON output alphabetically in Javascript

Question

I have a function that pulls a list of countries from a JSON array

function regionPlanOutput(networkGroupId) {
    document.getElementById("country_list").innerHTML = "";
    jQuery.ajax({
        type: 'GET'
        , url: regionApiURL + '/api/v4/networkGroups/' + networkGroupId + '/countries?count=500'
        , dataType: 'json'
        , success: function (networkGroup) {
            jQuery.each(networkGroup.countryList, function (i, countryList) {
                var countryName = countryList.name;
                var flag = countryList.logoUrl;
                var countrycontent = '<li>' + countryName + '</li>';
                console.log(countrycontent)
                jQuery(countrycontent).appendTo("#country_list");
            });
        }
    });
}

At the moment it just prints the list in the order it pulls them from the array, How do I sort the output alphabetically based on the variable countryName?

Note that when you get to success, that networkGroup parameter is already a JavaScript object, not JSON. JSON is a string format, so talking about a JSON array is bad terminology. — Heretic Monkey
– Heretic Monkey, Commented Jul 18, 2017 at 18:16

Daniel Beck · Accepted Answer · 2017-07-18 17:47:03Z

1

Instead of modifying the DOM inside the loop as you step through networkGroup.countryList (which makes sorting more complicated, and is a bad idea performance-wise anyway), capture the country names in a temporary array, sort that array, then drop it into the DOM in one go:

success: function (networkGroup) {
    var output = []; // temporary array
    jQuery.each(networkGroup.countryList, function (i, countryList) {
        output.push('<li>'+countryList.name+'</li>'); // capture each name in the temporary array.  We'll go ahead and include the <li> tags here since it won't affect the sort order
    });
    output.sort(); // sort it
    jQuery("#country_list").append(output.join('')); // drop it into the DOM
}

answered Jul 18, 2017 at 17:47

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Beck Over a year ago

Glad I could help!

Jay Lane · Accepted Answer · 2017-07-18 17:43:42Z

0

use the sort method on the returned array, should default to alphabetical since you're dealing with strings in the array.

answered Jul 18, 2017 at 17:43

Jay Lane

1,40116 silver badges30 bronze badges

Comments

Mark · Accepted Answer · 2017-07-18 17:59:20Z

0

Lets assume your networkGroup.countryList looks something like this:

countryList = [
    {name: "someName", logUrl: "http://example.com"},
    // ...etc.
]

You can sort by countryList.name like this:

countryList.sort(function(a, b){
    return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)
})

This will sort in place, so after you run that, your countryList will be changed to the sorted order. If you sort networkGroup.countryList before you call jQuery.each you should be good to go.

answered Jul 18, 2017 at 17:59

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Comments

cнŝdk · Accepted Answer · 2017-07-18 18:17:53Z

In your success function networkGroup is already a JavaScript object and not a JSON object.

So you just need to use Array.prototype.sort() method with your networkGroup.countryList array to get the sorted array.

This is how should be your code:

success: function(networkGroup) {
  networkGroup.countryList = networkGroup.countryList.sort(function(a, b) {
    var nameA = a.countryName.toUpperCase();
    var nameB = b.countryName.toUpperCase();
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0;
  });
  //The rest of your code 
}

Demo:

This is a working Demo snippet:

var group = {
  countryList: [{
      countryName: "Vietnam",
      prop: "5224"
    },
    {
      countryName: "USA",
      prop: "000"
    },
    {
      countryName: "Palestine",
      prop: "5454"
    },
    {
      countryName: "Nigeria",
      prop: "1717"
    },
    {
      countryName: "Albania",
      prop: "54"
    },
    {
      countryName: "Belgium",
      prop: "1000"
    }
  ]
};



var sortArray = function sortArray(networkGroup) {
  networkGroup.countryList = networkGroup.countryList.sort(function(a, b) {
    var nameA = a.countryName.toUpperCase();
    var nameB = b.countryName.toUpperCase();
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0;
  });
  return networkGroup.countryList;
}
console.log(sortArray(group));

Collectives™ on Stack Overflow

Sort and print JSON output alphabetically in Javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related