使用带有嵌套对象的 object 的 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 时，代码运行良好。 另一个 api 返回以下

{
    "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 是一个对象数组，而不工作的是一个带有嵌套对象的 object。
完整的代码在这里供任何人查看

在此先感谢您的帮助。

Answer 1

我在 此处放置了您的代码演示，并进行了一些更改：

• “btc”、“eth”和“ltc”是对象本身而不是简单的字段，因此将它们作为列没有多大意义。 也许您打算迭代这些对象并查看它们的“名称”、“单位”、“值”和“类型”。 我已经用后4个替换了这些列。

• 这些对象位于 object 内部，具有单个字段：“rates”。 因此，在最后一个.then()中，您必须

  let rates = rowData.rates

  但 rate 仍然是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)会在控制台上打印新获取的数据。