如何解析这个复杂的 JSON 数据并在 ionic 3 中添加搜索功能？

Question

1. 我有数组中列出的数据列表
2. 我希望将所有这些都列在我的 html 中（如果可能，使用标题/分隔符进行分段）
3. 我希望搜索功能正常工作

我找不到更好的方法来问这个问题，我相信这是一个非常简单的问题，但不知何故我就是不记得该怎么做。一世 用一些复杂的数据构建一个应用程序，虽然这不是 实际上，我已经创建了类似的东西来复制挑战。

这是我的 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"
      }
   ]
}

在我的 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,
 }

在我的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,
 }

我的listing.html如下

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

运行之后，我有以下内容

Answer 1

在您的数据加载调用中，即...，constructor() 将对象推送或分配给列表

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

我认为不应该成为问题的一件事是您的数组声明尝试将其更改为

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

那么您将在您的 html 中迭代一个数组