How can I parse this complex JSON data and add a search function in ionic 3?

Question

1. I have lists of listed data in arrays
2. I want to have all of them listed in my html(if possible segmented with a header/divider)
3. I want the search function to work appropiatly

I can't find a better way to ask this question and I believe it's quite a simple one, but somehow I just can't remember what to do. I building an app with some complex data though this is not the actual, I have create something similar to replicate the challenge.

here is my data.JSON

{  
   "list1":[  
      {  
         "id":"0",
         "title":"List 1 of 1",
         "content":"I am the 1st of list1"
      },
      {  
         "id":"1",
         "title":"List 2 of 1",
         "content":"I am the 2nd of list1"
      },
      {  
         "id":"2",
         "title":"List 3 of 1",
         "content":"I am the 3rd of list1"
      }
   ],
   "list2":[  
      {  
         "id":"0",
         "title":"List 1 of 2",
         "content":"I am the 1st of list2"
      },
      {  
         "id":"1",
         "title":"List 2 of 2",
         "content":"I am the 2nd of list2"
      },
      {  
         "id":"2",
         "title":"List 3 of 2",
         "content":"I am the 3rd of list2"
      }
   ],
   "list3":[  
      {  
         "id":"0",
         "title":"List 1 of 3",
         "content":"I am the 1st of list3"
      },
      {  
         "id":"1",
         "title":"List 2 of 3",
         "content":"I am the 2nd of list3"
      },
      {  
         "id":"2",
         "title":"List 3 of 3",
         "content":"I am the 3rd of list3"
      }
   ]
}

In my provider.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import "rxjs/add/operator/map";
import "rxjs/add/operator/do";

@Injectable()
export class TtProvider {

  private url: string = "assets/data/data.json";

  constructor(public http: HttpClient) {

    console.log('Hello TtProvider Provider');
  }


  getData(){
    return this.http.get(this.url)
    .map(res => res )

  }

}

interface Lists{
  id: number,
  title:string,
  content:string,
 }

In my listing.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TtProvider } from "../../providers/tt/tt";
import { DetailPage } from '../detail/detail';

@IonicPage()
@Component({
  selector: 'page-listings',
  templateUrl: 'listings.html',
})
export class ListingsPage {

  lists:Lists[];
  listSearch: any[];

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public dataapi: TtProvider) {

      this.dataapi.getData().subscribe(data =>{
        console.log ("data has loaded here", data);
        this.lists = data[''];
        this.listSearch = data[''];
      });
  }


  initializeItems() {
    this.lists = [...this.listSearch];
  }

  getItems(ev) {
   this.initializeItems();
   var val = ev.target.value;
      if (val && val.trim() != '') {
        this.lists = this.lists.filter((list) => {
            return (list.title.toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
    }
  }


  viewlist(list){
    console.log('I have loaded item', list);
    this.navCtrl.push(DetailPage, {list:list})
  }

}

interface Lists{
  id: number,
  title:string,
  content:string,
 }

My listing.html is as follows

<ion-header>

  <ion-navbar>
    <ion-title>listings</ion-title>
  </ion-navbar>

  <ion-searchbar 
  (ionInput)="getItems($event)">     
  </ion-searchbar>

</ion-header>


<ion-content padding>

  <ion-list >
    <ion-item *ngFor="let list of lists" >
      {{list.title}}
    </ion-item>
  </ion-list>

</ion-content>

After running that, I have the following

Answer 1

within your data load call ie ..., constructor() either push or assign the object to the lists

   this.dataapi.getData().subscribe(data =>{
        console.log ("data has loaded here", data);
        this.lists = data;
        this.listSearch = data;
      });

and a minute thing which i believe shouldn't be a problem is your array declaration try changing it to

lists:Lists[];
  listSearch: any[];

then you will have an array to be iterated on in your html