Получение и отображение данных в таблице начальной загрузки React

Привет, ребята, я пытаюсь отобразить свои данные из моего API здесь, мой ответ Json:

 {
    "id": 1,
    "name": "Chicken Wings",
    "product_category": {
        "name": "Starter"
    },
    "short_description": "Delicious Chicken Wings",
    "image": "http://127.0.0.1:8000/api/meal_images/telechargement.jpeg",
    "price": 10
},
{

Это мой компонент реакции для таблицы:

  <BootstrapTable data={this.state.todos} striped hover>
        <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 1000 } }>Name</TableHeaderColumn>
        <TableHeaderColumn dataField='product_category' filter={ { type: 'TextFilter', delay: 1000 } }>Category</TableHeaderColumn>
        <TableHeaderColumn dataField='image'> Image </TableHeaderColumn>
        <TableHeaderColumn dataField='price'> Price </TableHeaderColumn>
      </BootstrapTable>

но для 'product_category', которые отображают мне '{object} {object}, я пытаюсь отобразить имя product_category, я пробовал с dataField='product_category.name', но не работает, как я могу получить доступ к имени моего таблица product_category ? Спасибо


django reactjs react-bootstrap-table
person Mickael Zana    schedule 01.06.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать свойство dataFormat для одного TableHeaderColumn для форматирования определенных данных в ячейке. У вас есть данные типа Object для ячейки категории продукта, поэтому правильное форматирование данных для этой ячейки будет: dataFormat={ (cell) => cell.name }.

Вот как будет выглядеть весь табличный компонент:

<BootstrapTable data={this.state.todos} striped hover>
    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 1000 } }>Name</TableHeaderColumn>
    <TableHeaderColumn dataField='product_category' dataFormat={ (cell) => cell.name } filter={ { type: 'TextFilter', delay: 1000 } }>Category</TableHeaderColumn>
    <TableHeaderColumn dataField='image'> Image </TableHeaderColumn>
    <TableHeaderColumn dataField='price'> Price </TableHeaderColumn>
  </BootstrapTable>
person Nadezhda Serafimova    schedule 06.06.2018