[英]How to pass nested json to BootstrapTable in react-bootstrap-table2
I have a table and when a row is clicked, an additional row of more detail is display. 我有一个表,当单击一行时,会显示另一行更多细节。 I'm using reactJS and react-bootstrap-table2's BootstrapTable.
我正在使用reactJS和react-bootstrap-table2的BootstrapTable。
The below is my json file: 以下是我的json文件:
{
"persons": [{
"id": 1,
"name": "A",
"email": "a@email.com",
"contracts": [{
"metric": "metric1",
"contract_detail": [{
"cpm": 5,
"country_code": "US"
},{
"cpm": 1,
"country_code": "AU"
}]
},{
"metric": "metric2",
"contract_detail": [{
"cpm": 5,
"country_code": "US"
},{
"cpm": 1,
"country_code": "AU"
}]
}]
},
... ]}
The below is the expandRow in react-bootstrap-table2 以下是react-bootstrap-table2中的expandRow
renderer: row => (
<div>
<BootstrapTable
data={row.contracts}
columns={this.state.contract_columns}
keyField='id'
>
</BootstrapTable>
</div>
)
I expected that just passing row.contracts
as the data will populate all the fields but the country_code and cpm fields are empty. 我希望只传递
row.contracts
因为数据将填充所有字段,但country_code和cpm字段为空。
I also tried looping with map and filter but in this case, no table is being displayed. 我也尝试使用map和filter进行循环,但在这种情况下,没有显示任何表。
Im new to react and js so finding it a big hard to debug. 我是新的反应和js所以发现它很难调试。 Any help will be appreciated.
任何帮助将不胜感激。 Thanks !
谢谢 !
In case of Nested Json , need to use dataField specifically like below. 在嵌套Json的情况下,需要使用dataField,如下所示。 Hope this helps!
希望这可以帮助!
Excerpt from the documentation 摘自文档
column.dataField (required) - [String] Use dataField to specify what field should be apply on this column. column.dataField(必需) - [String]使用dataField指定应在此列上应用的字段。 If your raw data is nested, for example:
如果原始数据是嵌套的,例如:
const row = { id: 'A001', address: { postal: '1234-12335', city: 'Chicago' } } You can use dataField with dot(.) to describe nested object: const row = {id:'A001',地址:{postal:'1234-12335',city:'Chicago'}}您可以使用带有点(。)的dataField来描述嵌套对象:
dataField: 'address.postal' dataField: 'address.city' dataField:'address.postal'dataField:'address.city'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.