angular2 join arrays and filtering

Question

var cities = [{id: 1, name: "London"}, {id:2, name="manchester"}]
var areas = [{name="Buckingham palace", cityId: 1}, {name:"Wembley", cityId:1}, {name:"Media City", cityId: 2}, {name:"Old Trafford", cityId:2}]

How can I make a list appear like so:

London

Buckingham palace

Wembley

Manchester

Media City

Old Trafford

So far I have:

<ion-list>
    <ion-item *ngFor="let category of categories">
     {{category.name}}
    </ion-item>
    <ion-list>
        <ion-item *ngFor="let area of areas"> ### HERE: Where  area.id == category.id
            {{area.name}}
        </ion-item>
   </ion-list>
</ion-list>

I seem to get stuck matching the items, and researching shows no real clear way to do this. It's not good to flatten the data either as other items are appended later.

Any thoughts or best practices on nested loops matched by id's?

You can create a pipe to filter it. See stackoverflow.com/questions/34164413/… this is on old release but should be similar implementation. — Arpit Agarwal
– Arpit Agarwal, Commented Aug 7, 2016 at 9:14
Not really familiar with angular2 syntax but you can use groupBy filter — Evans Murithi
– Evans Murithi, Commented Aug 7, 2016 at 9:26

dale · Accepted Answer · 2016-08-07 12:18:00Z

1

Thanks @Arpit for your suggestion i went with this below using the latest angular2 (7-aug-16):

import { Injectable, Pipe } from '@angular/core';
@Pipe({    
  name: 'whereCatId',
  pure: false
})
@Injectable()
export class WhereCatId {
  transform(cities: any, catId: any){
     let matched = [];
 cities.forEach((city) => {
     if(city.category.id == catId){
        matched.push(city);    
     }
});  
return matched;
  }
}

Then in my page added the reference to the pipe file and included it in the @Component

and called it like

        <ion-item *ngFor="let area of areas | whereCatId:place.id">

edited Aug 7, 2016 at 12:18

answered Aug 7, 2016 at 10:13

dale

1,2582 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arpit Agarwal Over a year ago

Great I could help.

Collectives™ on Stack Overflow

angular2 join arrays and filtering

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related