0

The get call returns the following data

{"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":""},{"id":"4","employee_name":"Cedric Kelly","employee_salary":"433060","employee_age":"22","profile_image":""},{"id":"5","employee_name":"Airi Satou","employee_salary":"162700","employee_age":"33","profile_image":""},{"id":"6","employee_name":"Brielle Williamson","employee_salary":"372000","employee_age":"61","profile_image":""},{"id":"7","employee_name":"Herrod Chandler","employee_salary":"137500","employee_age":"59","profile_image":""},{"id":"8","employee_name":"Rhona Davidson","employee_salary":"327900","employee_age":"55","profile_image":""},{"id":"9","employee_name":"Colleen Hurst","employee_salary":"205500","employee_age":"39","profile_image":""},{"id":"10","employee_name":"Sonya Frost","employee_salary":"103600","employee_age":"23","profile_image":""},{"id":"11","employee_name":"Jena Gaines","employee_salary":"90560","employee_age":"30","profile_image":""},{"id":"12","employee_name":"Quinn Flynn","employee_salary":"342000","employee_age":"22","profile_image":""},{"id":"13","employee_name":"Charde Marshall","employee_salary":"470600","employee_age":"36","profile_image":""},{"id":"14","employee_name":"Haley Kennedy","employee_salary":"313500","employee_age":"43","profile_image":""},{"id":"15","employee_name":"Tatyana Fitzpatrick","employee_salary":"385750","employee_age":"19","profile_image":""},{"id":"16","employee_name":"Michael Silva","employee_salary":"198500","employee_age":"66","profile_image":""},{"id":"17","employee_name":"Paul Byrd","employee_salary":"725000","employee_age":"64","profile_image":""},{"id":"18","employee_name":"Gloria Little","employee_salary":"237500","employee_age":"59","profile_image":""},{"id":"19","employee_name":"Bradley Greer","employee_salary":"132000","employee_age":"41","profile_image":""},{"id":"20","employee_name":"Dai Rios","employee_salary":"217500","employee_age":"35","profile_image":""},{"id":"21","employee_name":"Jenette Caldwell","employee_salary":"345000","employee_age":"30","profile_image":""},{"id":"22","employee_name":"Yuri Berry","employee_salary":"675000","employee_age":"40","profile_image":""},{"id":"23","employee_name":"Caesar Vance","employee_salary":"106450","employee_age":"21","profile_image":""},{"id":"24","employee_name":"Doris Wilder","employee_salary":"85600","employee_age":"23","profile_image":""}]}

I was trying to get data and then fetch only employee_age and employee_name from , when I return the data from subscribe which is

this.service.getEmployee().subscribe((data)=>this.employees = data)

an error comes up in console Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

What should be the approach,I'm learning angular please help and how can i fetch only age and name from it

Swarup Chavan
  • 206
  • 1
  • 15
  • Does this answer your question? [How to iterate object keys using \*ngFor](https://stackoverflow.com/questions/41396435/how-to-iterate-object-keys-using-ngfor) – Edric Jul 12 '20 at 12:07
  • I have status and data both i first need to get only data and then name and age from it in the component itself for some operation @Edric – Swarup Chavan Jul 12 '20 at 12:11

1 Answers1

1

Please note the format of your JSON data, its basically an object with two keys, "status" which is string and "data" which is an array.

Having said that, if you only want to get the "data" portion of the result, you'd have to modify the subscribe code like this

this.service.getEmployee().subscribe((res)=>this.employees = res.data)

If for example you want to modify the service fetched json to a different format of your choice you have got map rxjs operator, that could transform your data from one format to another,

For example, if your employees array compose of object with only two fields employee_age and employe_name, you could map the result like this

    this.service.getEmployee().pipe(map(res=>{
let employeeArr: Employee[] = [];
res.data.forEach(x=>{
    let employeeObj: Employee=new Employee();
    employeeObj.employee_age = x.employee_age;
    employeeObj.employee_name = x.employee.name;

    employeeArr.push(employeeObj);
});
return employeeArr;
}).subscribe((res)=>this.employees = res);

So basically we have transformed our response into another format.

Thanks.

Obaid
  • 2,563
  • 17
  • 15
  • I have already tried that ,only to get Property 'data' does not exist on type @Obaid – Swarup Chavan Jul 12 '20 at 12:19
  • Please refer to updated answer. Also it would be great if you show the format of object this.employees. Thanks. – Obaid Jul 12 '20 at 12:25
  • 1
    Is Employee a class or an Interface as you cant create an object of Interface @Obaid,thanks for the lead i completed it and instead of res.employee_age need to do x.employee_age and i moved the logic to a seperate function and called the function inside map – Swarup Chavan Jul 12 '20 at 12:48
  • This is just for example, I've supposed it to be a class... you could have an interface.. in that case you would not use new keyword and instead instantiate object with curly brackets e.g. let employee:Employee={ employee_age: res.remployee_age} ... – Obaid Jul 12 '20 at 12:55
  • 1
    const employeeObj = {} as Employee; @Obaid – Swarup Chavan Jul 12 '20 at 12:58
  • Yes it was x.employee_age, modified it. Please mark it as answered so that it may help others. Thanks. – Obaid Jul 12 '20 at 13:12