How to make search pipe workable in angular6

Question

Below is Data Model

items1 = [

    title: 'Abc',
    items_containers : [

             title: 'edf',
             items_containers: [

                  title: 'pqr',
                  items_container: [

                     ............
                  ]
               ]
            ]
        ]

items2 = [

    title: 'xyz',
    items_containers : [

             title: 'mno',
             items_containers: [

                  title: 'uvw'
                  items_container: [

                     ............
                  ]
               ]
            ]
        ]

I need to write a logic in the pipe so that If I search the data with the title name child, it should show me the results including the parents and the children title.

search-pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})

export class Searchfunctionality implements PipeTransform {

   transform(items: any, filter: any, defaultFilter: boolean) : any {

        // logic here
   }
}

how it should be displayed in the html ? what if finds more than two records in different level, what is the output you are expecting ? — Sunil Singh, Oct 23 '18 at 17:03
no worries about the html part....just display the result in console...I have not understood your second question — Aditya, Oct 23 '18 at 17:05
@SunilSingh I have updated the question please have a look... — Aditya, Oct 23 '18 at 17:08
I downvoted because I see no effort to solve it. If you already have a logic, please share with us. — gr4viton, Oct 23 '18 at 17:09
I am unable to think broadly how to start with I have tried many..but my logic is only not working — Aditya, Oct 23 '18 at 17:10
You should search "recursively search object" - here is a very similar question: https://stackoverflow.com/questions/22222599/javascript-recursive-search-in-json-object — inorganik, Oct 23 '18 at 17:18
@inorganik In my case I don't have ids will it work for me too ? — Aditya, Oct 23 '18 at 17:21
@inorganik also my data is an array of datas set but not JSON, will it work for this too? anyways I am this — Aditya, Oct 23 '18 at 17:25

score 0 · Answer 1 · answered Oct 23 '18 at 17:54

First of all, your Data Model makes syntactically no sense. I suppose you mean something like this:

    items: any = [{
    title: 'Abc',
    items_containers : [{
             title: 'edf',
             items_containers: [{
                  title: 'pqr',
                  items_containers: [
                  ]
             }]
    }]
  }, {
    title: 'TTT',
    items_containers : [{
             title: 'edf',
             items_containers: [{
                  title: 'pqr',
                  items_containers: [
                  ]
             }]
    }]
  }];

You can easily filter your items to find all items which contain your search string like so:

 @Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if(!items) return [];

    if(!searchText) return items;

    return this.searchItems(items, searchText.toLowerCase());
   }

   private searchItems(items :any[], searchText): any[] {
     let results = [];
      items.forEach(it => {
        if (it.title.toLowerCase().includes(searchText)) {
            results.push(it);
        } else {
          let searchResults =  this.searchItems(it.items_containers, searchText);
          if (searchResults.length > 0) {
              results.push({
                title: it.title,
                items_containers: searchResults
              });
          }
        }
      });
      return results;
   }
}

See the corresponding fiddle for more information.

Is this what you asked for?

Best, Philipp

No you have wrongly intrepreted my data sets... In fact you change whole of my data sets.. There can be any nber of items arrays.. Like item1, itme2 and so on.... And inside item arrays there is a property title & itme_containers.... And item_containers in turn are arrays which consists of titles..... It's like tree-like parent-child... — Aditya, Oct 23 '18 at 18:08
He's right, @Aditya, you must be missing curly braces around objects with `title` and `items_container`. If you have `items1`, `items2` and so on, to search them all you need to put them in an array and loop over it — inorganik, Oct 23 '18 at 19:37

How to make search pipe workable in angular6

1 Answers1