Filtering a list of objects by a child array in Angular 2

Question

I have data that looks like this

[
  {id: 1234,
   Name: 'John',
   Tags: ['tag1', 'tag2']
  },
  {id: 1235,
   Name: 'Mike',
   Tags: ['tag1', 'tag3']
  }
]

I want to be able to type into a search bar and filter the data to search for related tags. There was a built in filter pipe for this in angular 1 but it looks like it has been removed in angular 2. I've been looking into custom pipes but the only way I can think to do it is with a nested loop that loops over all of the objects then loops through the tags. Am I thinking about this wrong. Is there an easier way to do this or a built in function that would work for this?

snorkpete · Accepted Answer · 2017-04-28 16:26:05Z

3

You can just use normal javascript APIs to get that behaviour:

data = [
  {id: 1234,
   Name: 'John',
   Tags: ['tag1', 'tag2']
  },
  {id: 1235,
   Name: 'Mike',
   Tags: ['tag1', 'tag3']
  }
];

filterDataByTag(searchTerm: string) {

   // filter the data array, based on some condition
   return this.data.filter(item => {

      // only include an item in the filtered results
      // if that item's Tags property includes the searchTerm
      // includes is a built in array method in ES2016
      return item.Tags.includes(searchTerm);
   });  
}

In my example, i'm harding coding the data, but you can adjust to suit your situation. The key point is the function returns a filtered list of the data based on the searchTerm, so you can just call this method each time you want to refresh your filtered list (for eg on the input event of your search field)

answered Apr 28, 2017 at 16:26

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

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

1 Comment

Muhammad Ishtiaq Hussain Over a year ago

The function could be simplified to: return this.data.filter(item => item.Tags.includes(searchTerm);

Karbos 538 · Accepted Answer · 2017-04-28 15:15:48Z

0

You should reorganize data into a reverse index store :

export interface StoreData {
  Tag: string;
  Peoples: People[] = [];
}

const store: StoreData[] = [];

export interface People {
  id: number; 
  Name: string;
  Tags: string[];
}

loadPeopleStore(peoples: People) {
  peoples.forEach(p => {
    p.Tags.forEach(t => {
      let storeData = store.filter(d => d.Tag === t);
      if(storeData.length == 1) {
        storeData[0].Peoples.push(p);
      } else {
        store.push({Tag: t, Peoples[p]});
      }
    }
  }
}

initYourPipe() {
 let peoples: People[] =   [
    {id: 1234,
     Name: 'John',
     Tags: ['tag1', 'tag2']
    },
    {id: 1235,
     Name: 'Mike',
     Tags: ['tag1', 'tag3']
    }
  ]

  this.loadPeopleStore(peoples);


}

edited Apr 28, 2017 at 15:15

answered Apr 28, 2017 at 15:05

Karbos 538

3,0752 gold badges25 silver badges37 bronze badges

1 Comment

mattc19 Over a year ago

Thanks, I will try this out!

Collectives™ on Stack Overflow

Filtering a list of objects by a child array in Angular 2

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related