Question

我正在从单独的打字稿文件中导出接口。在尝试遍历JSON响应时，我无法解析它。我需要从JSON响应中分离出一个对象，并将其存储在另一个数组中。

这是界面：

export interface IComplaintTagUri {
    id: string
    tag_uri: string
}

这是我要导入界面的打字稿文件：

tagCategories: IComplaintTagUri[];
dropdown = [];

ngOnInit() {
    this.tagCategories = [];

this.http.get<IComplaintTagUri[]>(tAPI.TagCategories).subscribe(result => {
    this.tagCategories = result;
    console.log("Result = ");
    console.log(result);
    console.log("Tag Categories = ");
    console.log(this.tagCategories);
  })
this.tagCategories.forEach(element => {
    this.dropdown.push(element.tag_uri);
    console.log(this.dropdown);
  }); 
console.log(this.dropdown);
}

我能够成功地将结果存储在tagCategories中。但是，当我尝试将tag_uri存储在另一个数组中时，它将无法正常工作。

似乎从未访问过for循环，并且最后一个日志将下拉列表显示为空数组。

谁能告诉我我要去哪里错了？

我也尝试将forEach包括在订阅函数中：

tagCategories：IComplaintTagUri []; dropdown = [];

ngOnInit() {
    this.tagCategories = [];

this.http.get<IComplaintTagUri[]>(tAPI.TagCategories).subscribe(result => {
    this.tagCategories = result;
    console.log("Result = ");
    console.log(result);
    console.log("Tag Categories = ");
    console.log(this.tagCategories);

this.tagCategories.forEach(element => {
  this.dropdown.push(element.tag_uri);
});
console.log(this.dropdown);

  })
}

现在，下拉列表将作为一系列未定义的对象打印到控制台。

Answer 1

Subscribe是一个异步函数，forEach行将在subscribe块完成之前执行，因此，当forEach运行时，tagCategories可能不包含任何值。解决方法是将forEach移到订阅中。

您遇到的第二个错误是this.dropdown.push(element.taguri)，应该是this.dropdown.push(element.tag_uri)

this.http.get<IComplaintTagUri[]>(tAPI.TagCategories).subscribe(result => {
    this.tagCategories = result;
    console.log("Result = ");
    console.log(result);
    console.log("Tag Categories = ");
    console.log(JSON.stringify(this.tagCategories));//make sure you have the result as you expect

    this.tagCategories.forEach(element => {
      this.dropdown.push(element.tag_uri);
      console.log(this.dropdown);
    }); 
  })
}

如何遍历在Typescript中包含两个对象的JSON响应？

1 个答案: