CODEWITHSUNDEEP
javascriptarraysangulartypescriptsorting
user2155564
user2155564

Reputation: 21

Sort an Array of Objects angular typescript

In TypeScript application i set array of objects and show it to user in my template

feedList: News[] =
  [
    { type: 1, slug: 'news', date: '2018/04/30', title: 'Header New', content: 'Lorem ipsum dolor sit amet'},
    { type: 2, slug: 'post', date: '2018/04/20', title: 'Header New', content: 'Lorem ipsum dolor sit amet' },
    { type: 1, slug: 'news', date: '2018/04/28', title: 'Header New', content: 'Lorem ipsum dolor sit amet' },
    { type: 1, slug: 'news', date: '2016/04/28', title: 'Header New', content: 'Lorem ipsum dolor sit amet' },
    { type: 2, slug: 'post', date: '2018/03/28', title: 'Header New', content: 'Lorem ipsum dolor sit amet' }
  ];

I have a function of sorting

sortByType(feedList: News[]): void {
    feedList.sort(function(a, b) {
      return a.type - b.type;
    });
  }

And I calling it in template

%button.btn{(click)="sortByType(this.feedList)"} Sort

But there is no changes and to errors. What I doing wrong?

If I use simply 

[#objectarray#].sort(function(a, b) {
          return a.type - b.type;
        });

— it works

upd: all template

.feed
  %button.btn{(click)="sortByType(this.feedList)"}
    Sort by type
  .f-item{*ngFor: "let feedItem of feedList", class: "{{feedItem.slug}}"}
    .type
      {{feedItem.type}} {{feedItem.slug}}
    .date
      {{feedItem.date}}

Upvotes: 2

Views: 11428

Answers (3)

Harsha Vardhan Reddy N
Harsha Vardhan Reddy N

Reputation: 51

If the value is string

 data.sort((a, b) => a.status.localeCompare(b.status));

If the value is int

data.sort((a, b) => a.status===b.status?-1:0);

Upvotes: 3

Masoud Bimar
Masoud Bimar

Reputation: 7801

I write a sort function by Typescript in Angular that sort an array of object based on property of list.

Assume we Have a List of Objects Like That:

Items: News[] =

      [
        { type: 1, slug: 'news', title: 'Header New', content: 'Lorem ipsum dolor sit amet'},
        { type: 2, slug: 'post', title: 'Header New', content: 'Lorem ipsum dolor sit amet' },
        { type: 1, slug: 'news', title: 'Header New', content: 'Lorem ipsum dolor sit amet' },
        { type: 1, slug: 'news', title: 'Header New', content: 'Lorem ipsum dolor sit amet' },
        { type: 2, slug: 'post', title: 'Header New', content: 'Lorem ipsum dolor sit amet' }
      ];

My Function is Like That:

sort(array:any[],property:string,isNumber:boolean){
        if(isNumber){
            return array.sort((item1,item2)=> {
                return (item1[property] > item2[property]) ? 1 : -1;});
        }else{
            return array.sort((item1,item2)=> {
                return (item1[property].toLowerCase() > item2[property].toLowerCase()) ? 1 : -1;});
        }
    }
  • param 1 : is array that should be sort
  • param 2 : is the property that sorting happens based on it
  • param 3 : is the Boolean that determine param 2 is number or string

Upvotes: 1

Lia
Lia

Reputation: 11982

in your template:

(click)="sortByType(feedList)"

in component:

sortByType(feedList: News[]): void {
    feedList.sort(function(a, b) {
      return a.type - b.type;
    });
this.feedList = feedList  }

in your template where you want to show the sorted array put:

{{feedList|json}}

Upvotes: 0

Related Questions