title: Ionic 3 filter nested JSON with ionic searchbar
body: <p>I have a question how to use ionic searchbar to filter items in a nested JSON object. As I've tried to filter the <code>header</code> item it worked perfectly fine but it does not work for the <code>name</code> wrap inside the <code>brands</code>.</p>
  
  <pre><code>{
  "items": [{
          "header": "A",
          "brands": [{ "name": "Apple", "id": "1" }, { "name": "Adidas", "id": "2" }]
      },
      {
          "header": "B",
          "brands": [{ "name": "Bose", "id": "3" }, { "name": "Boss", "id": "4" }, { "name": "Birkenstock", "id": "5" }]
      },
      {
          "header": "M",
          "brands": [{ "name": "McDonalds", "id": "6" }]
      }
  ]
  }
  </code></pre>
  
  <p>My <code>search.ts</code>:</p>
  
  <pre><code>    private result: any[];
    private searchItems: any;
    constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      private http: Http
    ) {
      let localData = this.http.get('assets/search-brand.json').map(res =&gt; res.json().items);
      localData.subscribe(data =&gt; {
        this.result = data;
      });
      this.initializeItems();
    }
  
    initializeItems() {
      this.searchItems = this.result;
    }
  
    getItems(ev: any) {
      // Reset items back to all of the items
      this.initializeItems();
  
      // set val to the value of the searchbar
      let val = ev.target.value;
  
      // if the value is an empty string don't filter the items
      if (val &amp;&amp; val.trim() != '') {
        this.searchItems = this.searchItems.filter((item) =&gt; {
          return (item.header.toLowerCase().indexOf(val.toLowerCase()) &gt; -1);
        })
      }
    }
  </code></pre>
  
  <p>My code (<code>search.html</code>):</p>
  
  <pre><code>&lt;ion-searchbar (ionInput)="getItems($event)"&gt;&lt;/ion-searchbar&gt;
  &lt;p&gt;{{test}}&lt;/p&gt;
  &lt;ion-list *ngFor="let item of searchItems; let i = index"&gt;
      &lt;ion-list-header&gt;
          {{item.header}}
      &lt;/ion-list-header&gt;
      &lt;ion-item *ngFor="let brands of item.brands; let j = index" (click)="selectedBrand(brands.id)"&gt;{{brands.name}}&lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>This one is working for filtering the <code>brands.name</code> it said <code>.toLowerCase() is not a function</code>.</p>