I encountered an issue where a function that I passed to a Kendo Grid field in the fetch method returns perfectly on console.log, but only [object Object] is returned in the Kendo Grid display.
Here's the background: I am utilizing two services - ReviewService and UserService. The data in the Kendo Grid is fetched using ReviewService, which includes an "id" field. To find the corresponding username from UserService based on the "id", I have created a function and integrated it into the fetch method.
Fetch Method
protected fetch(state: any): Observable<GridDataResult> {
this.loading = true;
this.pagination = new Pagination(state.skip, state.take);
return this.ReviewService.getByCriteria(this.pagination, this.apiVisa)
.pipe(
map(
response =>
<GridDataResult>{
data: response["objectList"].map(review => ({
id: review.id,
email: this.displayUser(review.id)
})),
total: response["totalRecords"]
}
),
tap(() => (this.loading = false))
);
}
Function
public getUser(value): Observable<any> {
return this.UserService.getByGuid(value, this.apiVisa);
}
public displayUser(id) {
console.log("GUID: ", id);
return this.getUser(id)
.pipe(
map((x: any) =>
x.data
))
.subscribe(x => {
this.getItem = x.username;
// return this.getItem;
console.log("Username: ", x.username);
return x.username;
// return this.getItem;
})
}
Expected Results
In Kendo Grid: Adibah
In console.log: Adibah
Actual Results
In Kendo Grid: [object Object]
In console.log: Adibah