Reading array of objects in angular

Question

I have a code that returns objects below after calling an 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":""}

This is the code block that retrieves the data:

myEmployees: Employee[];

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

I have also created a class Employee as below:

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

I want to store the results retrieved in an array of type Employee and then display an alert for each employee in the array. I am not very familiar with typescript, I tried the below but does not seem to work. I cannot access the properties of Employees. Anyone know how this can be achieved?

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

Hi, it is called in another function when the page is loaded. — avdeveloper
– avdeveloper, Commented Apr 28, 2020 at 8:56

XYZ_undefined · Accepted Answer · 2020-04-28 08:50:39Z

2

Hello you have to iterate

this.myEmployees.data

something like

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

Reason: The data is present inside the data array.

On side note do this, it'll work fine

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

}

answered Apr 28, 2020 at 8:50

XYZ_undefined

641 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

avdeveloper Over a year ago

Hi, unfortunately, it says that property .data does not exist.

XYZ_undefined Over a year ago

hello, when you assign this this.myEmployees = response.data;. you can directly iterate the value like this this.myEmployees.forEach(employee => { console.log(employee) });

avdeveloper Over a year ago

Unfortunately, it still does not allow .data to be assigned to response.

XYZ_undefined Over a year ago

try this

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

Shlok Nangia · Accepted Answer · 2020-04-28 09:01:04Z

first your JSON is not valid the valid JSON would be

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

please do the following

edit get request

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); 
}
});

now you should be able to access you data

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

cmprogram · Accepted Answer · 2020-04-28 09:16:33Z

1

Rather than subscribing to your data in the function, return the observable.

You can then subscribe to that, and iterate through it, or call as function as required.

In your ts file

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']);
   }
}

answered Apr 28, 2020 at 9:16

cmprogram

1,8943 gold badges15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Reading array of objects in angular

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related