Fetch and display data on React bootstrap Table

Question

Hello guys i am trying to display my data from my api here my Json response :

 {
    "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
},
{

This is my react component for the table :

  <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>

but for 'product_category' that display me '{object} {object} , i try to display the name of the product_category , i tried with dataField='product_category.name' but dosen't work how can i access to the name of my product_category table ? Thank you

score 1 · Answer 1 · answered Jun 06 '18 at 12:55

You can use dataFormat property for single TableHeaderColumn to format specific data in cell. You have data of type Object for product category cell, so the right data formatting for this cell will be: dataFormat={ (cell) => cell.name }.

Here is how will look like the whole table component:

<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>

Fetch and display data on React bootstrap Table

1 Answers1