Блог

У меня есть продукты.json-файл со всеми категориями в качестве объекта. Это работает нормально, если формат данных указан по ссылке ниже, но это не удается, если категории в этом json являются массивом. Я пытаюсь создать сетку react с одним столбцом из массива элементов категории.

Пример: https://stackblitz.com/edit/react-txwobq?file=app/products.json

Он отлично работает с блоком категорий как

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

в коде grid с приведенным ниже объектом json

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

Но я получаю внешний api в формате массива для таких категорий, как

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

Я пытался прочитать это значение в сетке react kendo следующим образом, но безуспешно. В чем была ошибка, которую я делаю?

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

Вы можете привязать столбец к полю «Категория» и определить пользовательский компонент ячейки, который будет отображать первый элемент из массива. Пожалуйста, проверьте приведенный ниже пример:

Определение столбца:

   <Column
    field="Category"
    title="Categories"
    cell={CategoryCell} 
  />
  

Пользовательская ячейка:

 const CategoryCell = (props) => {
   const category = props.dataItem[props.field][0];

   return <td>{category.CategoryName}</td>;
};