如何从角度的json文件中的json对象中搜索特定数组？

Question

我想使用 json 文件中的特定 json 对象搜索数组。

这是我的 json 文件。

{
 "data": [
      {
        "QueryID": "203972",
        "Query_Ref_No": "2019_06749",
        "Description": "cannot access files",
        "Location": "NULL"
      },
       {
        "QueryID": "203973",
        "Query_Ref_No": "2019_06751",
        "Description": "cannot access files",
        "Location": "NULL"
      }
}

下面是我的 .html 搜索代码。在这里，我使用了 ion-searchbar，它将接受输入并搜索 json 数据，并使用匹配的结果过滤数组。

<ion-searchbar
  animated
  icon="search"
  inputmode="numeric"
  showCancelButton="never"
  autocomplete="on"
  autocorrect="on"
  (ionInput)="filterItems($event)"
  (ionCancel)="onCancel()"
  placeholder="Enter Request No">
</ion-searchbar>

下面是我的 .ts 文件。在这里，当用户进入搜索栏时，将调用 filterItems(event) 函数。 我使用函数 searchData() 从 json 文件中获取整个 json 数据。 现在我想根据QUERY_REF_NO过滤数据。

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'app-connect-to-solve-details',
  templateUrl: './connect-to-solve-details.component.html',
  styleUrls: ['./connect-to-solve-details.component.scss'],
})
export class ConnectToSolveDetailsComponent implements OnInit {

  constructor(public router: Router, private http: HttpClient, private c2s: ConnectToSolveService) { }

  response: any =  []
  rev: any = []
  id: any

  searchdata: any[]
  items: any[]
  itemsarray: any[]

  result: any = []


  searchData()
  {
    this.http.get("/assets/data/C2S/concern_status.json").subscribe((searchdata: any) => {
     this.searchdata = searchdata.data;
     this.items = this.searchdata;
     //console.log(this.searchdata)
     console.log(this.items)
     })
     //return this.response
  }

  filterItems(event)
  {
    
   this.searchData();
   const val = event.target.value;
   if(val && val.trim() !== '')
    {
      this.itemsarray = this.items.filter((item) => (this.items.values["Query_Ref_No"].indexOf(val) > -1))
    console.log(this.itemsarray)
    }
    else{
      //this.isItemAvailable = false;
    }
   //console.log(event)
  }

 

}

我收到错误：ERROR TypeError: Cannot read property 'filter' of undefined

如果有人能告诉我如何搜索，那将是非常有帮助的。

提前致谢。

Answer 1

您可以让searchData 在filterItems 函数中返回承诺和await。

  searchData() {
    return this.http
     .get("/assets/data/C2S/concern_status.json").subscribe()
  }

  async filterItems(event) {
   try {
     const response = await this.searchData();
     this.searchData = response;
     this.items = response.data;
     const val = event.target.value;
       if(val && val.trim() !== '') {
         this.itemsarray = this.items.filter((item) => items["Query_Ref_No"].indexOf(val) > -1)
         console.log(this.itemsarray)
       }
    }
    catch (error) {
      console.log(error);
    }
  }