获取 API 响应并将数据存储到数组中答案

【问题标题】：Get the API response and store the data in to an array获取 API 响应并将数据存储到数组中
【发布时间】：2019-12-22 02:22:10
【问题描述】：

我正在尝试从我的 Angular 应用程序调用 API 并使用我的前端中的数据取回数据。我得到了回复，但我不确定如何从 JSON 中获取特定字段并将它们存储到数组中

 dataList;
 apiUrl = 'GetDatafromSys?prj=123;

 constructor(service: DataService) {
 service.get<any>(this.apiUrl).subscribe(x => {this.dataList = (JSON.stringify(x)); });
}

我将dataList 以 JSON 格式返回

 [
  {
    "Name": "Jack",
    "EmpNo":"123"
  },
  {
   "Name": "Joe",
    "EmpNo":"456"
  }
 ]

我不确定如何从 JSOn 中获取 Name 并将其存储在一个数组中，以便我可以将其用作下拉列表的数据源

  <dx-select-box [dataSource]=""

【问题讨论】：

你得到的是你想要的数组。为什么将其转换为 JSON 字符串？只需使用x => this.dataList = x;。
DataList 是完整的数据响应，如果我将它作为 JSON 格式，我想我可以在字段中使用它们。我是打字新手
正如@JB Nizet 所写，您不需要JSON.stringify。如果您需要一个只有名称的数组，您可以使用 map() 函数来完成。 const names = this.dataList.map(item => item.Name)
这与 TypeScript 无关。它与 Angular HttpClient 有关。你读过指南（angular.io/guide/http）吗？如果你这样做了，你会意识到它为你解析了 JSON。即使它没有，并且发回一个 JSON 字符串，你需要做的是获取一个数组是 parse 字符串。您正在调用 JSON.stringify(): 将数组或对象转换为 JSON 字符串。而且你不想要一个 JSON 字符串，你想要一个数组。
你真的应该避免使用any。定义一个接口，正如指南中再次解释的那样。

标签： angular typescript angular7

【解决方案1】：

您可以为您的员工创建一个界面：

export interface Employee{
Name:string;
EmpNo:number;
}

现在，您可以修改您的构造函数，为您的员工接口消除“任何”，并将此类型添加到您的数据列表中。

 dataList: Employee[];
 apiUrl = 'GetDatafromSys?prj=123;

 constructor(service: DataService) {
 service.get<Employee[]>(this.apiUrl).subscribe(x => {this.dataList = x }); // here you assign your results to your datalist array
}

现在，您可以通过访问任何元素的位置来获取任何元素的属性。或者使用 foreach 函数来获取任何您需要的名称。例如：

public print(){
this.dataList.forEach(element => {
  console.log(element.Name);
});

}

希望这能让您了解如何存储您的信息。

【讨论】：

dataList 在您的示例中应为 Employee[] 类型