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}}

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}}

• javascript
• arrays
• angular
• typescript
• sorting

• Can you show more of your template? It looks like syntax error to me. – Kelvin Lai Commented Apr 29, 2018 at 7:31
• Yes, thanx! In haml i must to use tar{key: value, but i used = – user2155564 Commented Apr 29, 2018 at 10:25

3 Answers 3

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); 

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

in your template:

(click)="sortByType(feedList)"

in ponent:

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}}