React kendo grid setting array item as column field

[Kurkula]

I have products.json file with all categories as object. It works fine if the data format is in the below link but it fails if categories in that json is an array. I am trying to create a react grid with one column from array of category items.

Example: https://stackblitz.com/edit/react-txwobq?file=app/products.json
It works fine with categories block as

<Column field="Category.CategoryName" title="CategoryName" />

in grid code with the below json object

"Category" : {"CategoryID" : 1,"CategoryName" : "Beverages","Description" : "Soft drinks, coffees, teas, beers, and ales"}

But I get the external api in array format for categories like

"Category" : [{"CategoryID" : 1,"CategoryName" : "Beverages","Description" : "Soft drinks, coffees, teas, beers, and ales"}]

I tried reading this value in react kendo grid like this but no luck. What was the mistake I am doing?

<Column field="Category[0].CategoryName" title="CategoryName" />     

 

[Stefan]

Hello, Kurkula,

Thank you for the details.

In this case, I can suggest parsing the data before passing it to the Grid.

I made an example of this approach:

https://stackblitz.com/edit/react-txwobq-uqnnfx?file=app/main.js

Regards,
Stefan
Progress Telerik