How to order array of objects in Angular 8?

Question

I have a live API which has data in JSON format and I trying to display it on my website (for web development learning). I did request the data have a the data displayed on my website but the problem is how do I order my data by 'Country"? Any help please

"countries": [
{
  "country": "United States",
  "countryCode": "US",
},
{
  "country": "Spain",
  "countryCode": "ES",
},

Does this answer your question? [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value) — Igor, Apr 22 '20 at 18:41
And first just use `JSON.parse()` to deserialize your JSON string, unless you already have an object. — seBaka28, Apr 22 '20 at 18:44

score 1 · Answer 1 · answered Apr 22 '20 at 18:54

U can try

sortbyKey(obj,key){
  return obj.sort(function(a, b) {
    var keyA = a[key],
      keyB = b[key];
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
  });

}

example is below

var list={"countries": [
{
  "country": "United States",
  "countryCode": "US",
},
{
  "country": "Spain",
  "countryCode": "ES",
}
]
}

function sortbyKey(obj,key){
  return obj.sort(function(a, b) {
    var keyA = a[key],
      keyB = b[key];
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
  });
  
}
list.countries=sortbyKey(list.countries,"country")

console.log(list)

score 1 · Answer 2 · answered Apr 22 '20 at 18:58

First, create a model class that represents your incoming object as shown below -

export class Countries {
    country: string;
    countryCode: string;
}

Then initialize it as an array of objects -

countriesModel : Countries [] = [];

Convert your JSON to a model by parsing it -

this.countryModel = JSON.parse(your_country-object);

After that call the sortCountries function and pass the property in the object on which you want to sort -

this.sortCountries(p => p.country, 'ASC');

Finally, your sort functions body should look something like this -

sortCountries<T>(countryName: (c: countriesModel) => T, order: 'ASC' | 'DESC'): void {
this.countriesModel.sort((a, b) => {
  if (countryName(a) < countryName(b)) {
    return -1;`enter code here`
  } else if (countryName(a) > countryName(b)) {
    return 1;
  } else {
    return 0;
  }
});

if (order === 'DESC') {
  this.countriesModel.reverse();
}

}

How to order array of objects in Angular 8?

2 Answers2