angularsortingalphabeticalalphabetical-sort

Alphabetically sort in Angular


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


Solution

  • 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