Alphabetically sort in Angular

Question

I am new in Angular and sorry if this question is repeated but I can't find the answer I was looking for. I have a file with a next JSON in it:

   {"name": "John", "size" : "small"},
   {"name": "Rocky", "size" : "small"},
   {"name": "Angel", "size" : "small"},
   {"name": "Amber", "size" : "small"},
   {"name": "Sam", "size" : "small"}

And I want to create a pipe so I could display only names but in alphabetical order. That should look like this:

Amber Angel John Rocky Sam

Or maybe...is there any other way other than using the pipe?

Thanks a lot

Answer 1

If you want to create a pipe to do it, follow this code:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "nameConcat"
})
export class NamePipe implements Pipetransform {
  transform(value: any[], ...args: any[]) {
    const sorted = [...value].sort((a, b) => (a.name > b.name ? 1 : -1));
    return sorted.map((item) => item.name).join(" ");
  }
}

And use it like this:

<p>{{data | nameConcat}}</p>

Here is a codesandbox: https://codesandbox.io/s/stupefied-bash-remov?fontsize=14&hidenavigation=1&theme=dark