Question:
In my Angular application, I am working with a Kendo Grid and using the generateColumns method to dynamically create columns for the grid. The data is fetched from an API, including a property that contains an array of roles.
Below is a snippet of the generateColumns method:
generateColumns(dataItem: any): void {
const excludedColumns = ['password'];
const columns = Object.keys(dataItem)
.filter((key) => !excludedColumns.includes(key))
.map((key) => ({
field: key,
title: key.charAt(0).toUpperCase() + key.slice(1).replace('_', ' '),
}));
// How can I modify this method to display the 'name' property of the 'roles' array in the 'role' column?
console.log(columns);
this.administration.columns = columns;
}
The 'dataItem' object features a 'roles' property which stores an array of objects. However, when displayed in the Kendo Grid, the 'role' column shows [object Object] instead of the actual role name.
Referencing the JSON data example below:
{
"id": 24,
"username": "john_doe2",
"roles": [
{
"id": 2,
"name": "employee",
"desc": "employee"
},
{
"id": 1,
"name": "admin",
"desc": "admin"
}
]
}
Additionally, a screenshot of the grid table is included for reference.