javascript - How to perform groupBy operation in Angular 2? - Stack Overflow

admin管理员组

文章数量:1325137

Angular 2 : 2.0.0-alpha.31 / Typescript 1.5

I requested data from a http.get query

this.http.get('/data/players.json')
                  .toRx()
                  .map((res) => res.json())
                  .subscribe((data) => {
                        this.players = data;
                  });

This query return me this Json object (this.players)

[
  {"team":"teamA","name":"player1","age":"1"},
  {"team":"teamA","name":"player2","age":"1"},
  {"team":"teamA","name":"player3","age":"1"},
  {"team":"teamB","name":"player4","age":"1"},
  {"team":"teamB","name":"player5","age":"1"}
]

Then I would like to display player grouped by team

teamA: player1,player2,player3
teamB: player4,player5

How can I groupBy team on Angular2 (directly into the @View?) ?

UPDATE

I saw that on Angular 1, this could be done in the view using | groupBy:'propertyName' on ngFor. Is there something like this on Angular 2 ?

Angular 2 : 2.0.0-alpha.31 / Typescript 1.5

I requested data from a http.get query

this.http.get('/data/players.json')
                  .toRx()
                  .map((res) => res.json())
                  .subscribe((data) => {
                        this.players = data;
                  });

This query return me this Json object (this.players)

[
  {"team":"teamA","name":"player1","age":"1"},
  {"team":"teamA","name":"player2","age":"1"},
  {"team":"teamA","name":"player3","age":"1"},
  {"team":"teamB","name":"player4","age":"1"},
  {"team":"teamB","name":"player5","age":"1"}
]

Then I would like to display player grouped by team

teamA: player1,player2,player3
teamB: player4,player5

How can I groupBy team on Angular2 (directly into the @View?) ?

UPDATE

I saw that on Angular 1, this could be done in the view using | groupBy:'propertyName' on ngFor. Is there something like this on Angular 2 ?

• javascript
• angular
• typescript
• group-by

Share Improve this question Follow edited Feb 20, 2017 at 15:57 HardikDG 6,12233 gold badges2828 silver badges5555 bronze badges asked Jul 25, 2015 at 6:44 plone1plone1 67611 gold badge1010 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Not sure exactly what version of Angular2 it was introduced but you can call RX's GroupBy function. I don't think you need the .toRx() call in more recent versions either.

Before you subscribe add something like this:

.map((res) => res.json())
.groupBy(
    x => x.team,
    x => x
);

can you use filter?

var test = [
  {"team":"teamA","name":"player1","age":"1"},
  {"team":"teamA","name":"player2","age":"1"},
  {"team":"teamA","name":"player3","age":"1"},
  {"team":"teamB","name":"player4","age":"1"},
  {"team":"teamB","name":"player5","age":"1"}
];

function FilterByTeam(obj){
    console.log(obj);
    return obj.team === "teamA";
 }

 var teamA = test.filter(FilterByTeam);
 console.log(teamA)

本文标签： javascriptHow to perform groupBy operation in Angular 2Stack Overflow