将 Ag-grid 与嵌套对象的对象一起使用

Question

我正在尝试将 ag-grid 与 api 一起使用，它提供以下代码

{
  "rates": {
    "btc": {
      "name": "Bitcoin",
      "unit": "BTC",
      "value": 1,
      "type": "crypto"
    },
(snip) 
}

而我的 ag-grid 是按以下方式设置的

 <AgGridReact
            rowSelection="multiple"
                rowData={rowData}>
                <AgGridColumn field="btc"  filter={true} checkboxSelection={true} sortable={true}></AgGridColumn>
                <AgGridColumn field="eth" filter={true} checkboxSelection={true} sortable={true}></AgGridColumn>
                <AgGridColumn field="ltc" filter={true} checkboxSelection={true} sortable={true}></AgGridColumn>
            </AgGridReact>

到目前为止，这是给我一个错误。我不明白为什么，因为当我使用不同的 api 时代码工作正常。其他apireturns以下

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }

我的工作网格是这样设置的

<AgGridReact
            rowSelection="multiple"
                rowData={rowData}>
                <AgGridColumn field="name"  filter={true} checkboxSelection={true} sortable={true}></AgGridColumn>
                <AgGridColumn field="phone" filter={true} checkboxSelection={true} sortable={true}></AgGridColumn>
                <AgGridColumn field="email" filter={true} checkboxSelection={true} sortable={true}></AgGridColumn>
            </AgGridReact>

我注意到不同之处在于工作 api 是一个对象数组，而不工作的是一个具有嵌套对象的对象。
完整代码here任何人都可以查看

在此先感谢您的帮助。

Answer 1

我已将您的代码演示 here 进行了一些更改：

“btc”、“eth”和“ltc”本身是对象而不是简单的字段，因此将它们作为列没有多大意义。也许您打算迭代这些对象并改为查看它们的“名称”、“单位”、“值”和“类型”。我已经用后 4.
替换了这些列
这些对象位于具有单个字段的对象内：“费率”。因此，在你的最后一个 .then() 中，你必须
```
let rates = rowData.rates
```
但是rates仍然是一个对象，不是数组。所以你还必须
```
let newRowData = Object.values(rates)
```
这个newRowData变量是一个对象数组，由“btc”、“eth”、“ltc”等值组成，像这样：
```
[{
  "name": "Bitcoin",
  "unit": "BTC",
  "value": 1.0,
  "type": "crypto"
}, {
  "name": "Ether",
  "unit": "ETH",
  "value": 33.13,
  "type": "crypto"
},
...
}]
```
最后，我把console.log()放在最后一个.then()里面，因为fetch()是异步的，不保证console.log(rowData) 将在控制台上打印新获取的数据。

将 Ag-grid 与嵌套对象的对象一起使用

Using Ag-grid with object of nested objects

javascript

reactjs

ag-grid