While working on an Angular 7 application, I encountered an issue where I was trying to fetch tabular data from an API call and assign it to HTML elements. Below is the code snippet I used:
Typescript class:
export class IBiodatas{
CompanyId:number;
EmpCode: string;
ImageURL: string;
Name: string;
UserId : number;
}
Typescript service call :
getDetail(userName):Observable<IBiodatas[]>{
return this.http.get<IBiodatas[]>(this.API_URL + userName,this.httpOptions).pipe(
catchError(this.handleError('getDetail',[]))
)
}
Typescript component code :
heroes: IBiodatas[];
getDetail(): void {
this.biodataService.getDetail('?userName=Santosh')
.subscribe(
data=> {
this.heroes = Array.of(data.data.Table[0]);//Error: Property 'data' does not exist on type 'IBiodatas[]'.
console.log('456456',this.heroes);
},
);
}
Received data from API :
{
"APIExecutionTime":"0 sec(s) to execute the function",
"data":{
"Table":[{
"UserId":654,
"ImageURL":"654.png",
"Name":"Santosh Pal",
"CompanyId":78,"EmpCode":"987"
}]},
"httpStatusCode":200,
"msg":"OK",
"IsValid":true
}
how to get data.Table[0] and assign to class property
ERROR in src/app/app.component.ts(30,41): error TS2339: Property 'data' does not exist on type 'IBiodatas[]'.