Чтение массива объектов в angular

Question

У меня есть код, который возвращает объекты ниже после вызова API:

{"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":""}

Это блок кода, который извлекает данные:

myEmployees: Employee[];

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

Я также создал класс Сотрудник, как показано ниже:

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

Я хочу сохранить полученные результаты в массиве типа Employee, а затем отобразить предупреждение для каждого сотрудника в массиве. Я не очень знаком с машинопись, я пробовал ниже, но, похоже, не работает. Я не могу получить доступ к свойствам сотрудников. Кто-нибудь знает, как этого можно достичь?

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

Answer 1

Здравствуйте, вам нужно выполнить итерацию

this.myEmployees.data

что-то вроде

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

Причина: данные присутствуют внутри data array.

При добавлении к сведению, это будет нормально работать

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

}

Answer 2

Вместо того, чтобы подписываться на ваши данные в функции, верните наблюдаемое.

Затем вы можете подписаться на него и выполнить итерацию по нему или вызвать как функцию, как требуется.

В вашем файле 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']);
   }
}

Answer 3

сначала ваш 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);
}