将Ag网格与嵌套对象中的对象一起使用

Question

我正在尝试将ag网格与提供以下代码的api一起使用

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

我的ag网格是以以下方式设置的

<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时，代码运行良好。另一个api返回以下

{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[e-mail]",
"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是一个对象数组，而不工作的是一个带有嵌套对象的对象。
这里有完整的代码供任何人查看

提前感谢你的帮助。

Answer 1

我在这里放了一个代码演示，并做了一些更改：

• "；btc"eth"；，以及"；ltc"；是对象本身，而不是简单的字段，所以将它们作为列没有多大意义。也许你想对这些对象进行迭代，并查看它们的"；name"单元"值"；，以及"；类型"；相反我已经用后4列替换了这些列。

• 这些对象位于具有单个字段的对象内部：；费率"；。因此，在上一次.then()中，您必须进行

  let rates = rowData.rates
  

  但是rates仍然是一个对象，而不是一个数组。所以你还必须使用

  let newRowData = Object.values(rates)
  

  这个CCD_ 3变量是一个对象数组；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)会在控制台上打印新获取的数据。