CODEWITHSUNDEEP
angular
avdeveloper
avdeveloper

Reputation: 549

Reading array of objects in angular

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

Upvotes: 0

Views: 435

Answers (3)

cmprogram
cmprogram

Reputation: 1884

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

Upvotes: 1

Shlok Nangia
Shlok Nangia

Reputation: 2377

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

Upvotes: 1

XYZ_undefined
XYZ_undefined

Reputation: 64

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

}

Upvotes: 2

Related Questions