CODEWITHSUNDEEP
javascriptangular
mattc19
mattc19

Reputation: 718

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

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?

Upvotes: 0

Views: 5786

Answers (2)

snorkpete
snorkpete

Reputation: 14564

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)

Upvotes: 3

Karbos 538
Karbos 538

Reputation: 3055

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


}

Upvotes: 0

Related Questions