Question

我有一个在调用API之后返回以下对象的代码：

        <setBody id="set-empty-body">
            <constant/>
        </setBody>

这是检索数据的代码块：

{"status":"success","data":[{"id":"1","employee_name":"Tiger 
Nixon","employee_salary":"320800","employee_age":"61","profile_image":""}, 
{"id":"2","employee_name":"Garrett 
Winters","employee_salary":"170750","employee_age":"63","profile_image":""}, 
{"id":"3","employee_name":"Ashton 
Cox","employee_salary":"86000","employee_age":"66","profile_image":""}

我还创建了一个Employee类，如下所示：

myEmployees: Employee[];

getEmployees() {
this.http.get<Employee[]>('http://dummy.restapiexample.com/api/v1/employees')
.subscribe((response) => {
this.myEmployees = response;
console.log(this.myEmployees); 
});
}

我想将检索到的结果存储在Employee类型的数组中，然后为该数组中的每个雇员显示一个警报。我对打字稿不是很熟悉，我尝试了以下操作，但似乎不起作用。我无法访问员工的属性。有人知道如何实现吗？

export class Employee {
id: any;
employee_name: any;
employee_salary: any;
employee_age: any;
profile_image: any;
}

Answer 1

你好，你必须迭代

this.myEmployees.data

类似

this.myEmployees.data.forEach(employee => {
console.log(employee)
});

原因：数据存在于 data 数组中。

请注意，这样做会很好

getEmployees() {
this.http.get<Employee[]>('http://dummy.restapiexample.com/api/v1/employees')
.subscribe((response) => {
this.myEmployees = response.data;
console.log(this.myEmployees); 
});

}

Answer 2

首先，您的JSON无效有效的JSON将是

{
  "status": "success",
  "data": [
    {
      "id": "1",
      "employee_name": "Tiger Nixon",
      "employee_salary": "320800",
      "employee_age": "61",
      "profile_image": ""
    },
    {
      "id": "2",
      "employee_name": "Garrett Winters",
      "employee_salary": "170750",
      "employee_age": "63",
      "profile_image": ""
    },
    {
      "id": "3",
      "employee_name": "Ashton Cox",
      "employee_salary": "86000",
      "employee_age": "66",
      "profile_image": ""
    }
  ]
}

请执行以下操作

修改获取请求

this.http.get<Employee[]>('http://dummy.restapiexample.com/api/v1/employees')
.subscribe((response) => {
if(response && response['data']){
 this.myEmployees = response['data'];
 // because employee list is inside data property
 console.log(this.myEmployees); 
}
});

现在您应该可以访问数据

for (let m of this.myEmployees) {
  alert(m.employee_name);
}

Answer 3

返回可观察值，而不是在函数中预订数据。

然后您可以订阅该消息，并对其进行迭代，或者根据需要作为函数调用。

在您的ts文件中

myEmployees: Employee[] = [];

constructor() { 
   this.getEmployees().subscribe((data: Employee[]) => {
   this.myEmployees = data;
   this.alertFunction();
  }
}

getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>('http://dummy.restapiexample.com/api/v1/employees'); 
}

alertFunction() { // I assume this function is for testing, but using the console is far better so please remove this
   for (let employee of this.myEmployees) {
      alert(employee['employee_name']);
   }
}

读取角度对象数组

3 个答案: