从 observable 获取 json 数组值并将数据提供给前端

Question

尝试使用 observables 从 json-server 获取 JSON 数组，然后将值提供给前端并对通过 observable 接收到的 JSON 数组执行搜索

创建一个服务并使用 HTTP get 连接到服务器并订阅它 创建for循环以从订阅的返回值中获取值

**service.ts**
export class FormdtService {
  baseul='http://localhost:3000/objects'//jsonserver url
  constructor(private http:HttpClient) { }
  getdt():Observable<any>{
    return this.http.get(this.baseul)
  }
}

**component.ts**
export class FormsComponent implements OnInit {
  constructor(public fbu:FormBuilder,private fdts:FormdtService) {}
  //creates the reactive form
 form=this.fbu.group({
    un:'',
    id:''
   })
 //  baseul='http://localhost:3000/objects/';
//ngsubmit control of form brings this function
  ser(){
    this.fdts.getdt().subscribe(dt=>{
      console.log("data: "+dt[0])
      this.formdt.push(dt)
      //console.log("formdt :"+this.formdt[0])
    for (let ite in this.formdt){
      let ite1=JSON.parse(ite)
     // console.log("ite :"+this.formdt[ite]);
      //console.log("ite1"+ite1);
      this.idlist.push(ite1.person.bioguideid.value)
if(ite1.person.bioguideid.stringify==this.idsearch)
this.objson=ite1
    }});
  }
idsearch:string
formdt:string[]
idlist:string[]
objson:JSON
  ngOnInit() {

  }
 //this function is attached to button in frontend
 ser(){
    this.fdts.getdt().subscribe(dt=>
this.formdt.push(dt)//subscribes to service
    for (let ite in this.formdt){
      let ite1=JSON.parse(ite)
      this.idlist.push(ite1.person.bioguideid.value)
if(ite1.person.bioguideid.value==this.idsearch)
this.objson=ite1
  })}

**json**
[
  {
    "caucus": null,
    "congress_numbers": [
      114,
      115,
      116
    ],
    "current": true,
    "description": "Senior Senator for Tennessee",
    "district": null,
    "enddate": "2021-01-03",
    "extra": {
      "address": "455 Dirksen Senate Office Building Washington DC 20510",
      "contact_form": "http://www.alexander.senate.gov/public/index.cfm?p=Email",
      "fax": "202-228-3398",
      "office": "455 Dirksen Senate Office Building",
      "rss_url": "http://www.alexander.senate.gov/public/?a=rss.feed"
    },
    "leadership_title": null,
    "party": "Republican",
    "person": {
      "bioguideid": "A000360",
      "birthday": "1940-07-03",
      "cspanid": 5,
      "firstname": "Lamar",
      "gender": "male",
      "gender_label": "Male",
      "lastname": "Alexander",
      "link": "https://www.govtrack.us/congress/members/lamar_alexander/300002",
      "middlename": "",
      "name": "Sen. Lamar Alexander [R-TN]",
      "namemod": "",
      "nickname": "",
      "osid": "N00009888",
      "pvsid": "15691",
      "sortname": "Alexander, Lamar (Sen.) [R-TN]",
      "twitterid": "SenAlexander",
      "youtubeid": "lamaralexander"
    },
    "phone": "202-224-4944",
    "role_type": "senator",
    "role_type_label": "Senator",
    "senator_class": "class2",
    "senator_class_label": "Class 2",
    "senator_rank": "senior",
    "senator_rank_label": "Senior",
    "startdate": "2015-01-06",
    "state": "TN",
    "title": "Sen.",
    "title_long": "Senator",
    "website": "https://www.alexander.senate.gov/public"
  },//end of single json array object
  {
    "caucus": null,
    "congress_numbers": [
      114,
      115,
      116
    ],  
"current": true,
    "description": "Senior Senator for Maine",
    "district": null,....same repetition of structure

ser 函数应该将服务器中存在的整个 JSON 数组提供给 formdt[]，然后对其进行迭代并获取每个对象并转换为 JSON 并将 bioguide 推送到 id 数组，从输入中搜索 id 并与每个对象的 JSON 嵌套值匹配数组中的对象 没有任何反应在控制台中给出错误：

_this.formdt 在第 37 行未定义 (this.fdts.getdt().subscribe(dt=>this.formdt.push=dt))

Answer 1

鉴于错误非常明确：this.formdt 未定义。

你已经声明了 preperty 类型但还没有初始化它。

所以用formdt:string[] = []替换formdt:string[]