Using Ag-grid with object of nested objects

Question

I am trying to use ag-grid with an api that gives the following code

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

And my ag-grid is set up in the following way

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

So far that is giving me an error. I am not understanding why, because the code is working fine when I use a different api. The other api returns the following

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

And my working grid is set up in the following way

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

I've noticed that the difference is the working api is an array of objects, while the one that is not working is an object with nested objects.
The full code is here for anyone to view

thanks in advance for your help.

rateLess · Accepted Answer · 2020-11-28 07:15:40Z

1

I've put a demo of your code here with a few changes:

"btc", "eth", and "ltc" are objects themselves rather than simple fields, so having them as columns wouldn't make much sense. Maybe you meant to iterate on these objects and view their "name", "unit", "value", and "type" instead. I've replaced the columns with the latter 4.
These objects are inside of an object with a single field: "rates". Therefore, in your last .then() you'd have to
```
let rates = rowData.rates
```
But rates is still an object, not an array. So you'll also have to
```
let newRowData = Object.values(rates)
```
This newRowData variable is an array of objects consisting of the values of "btc", "eth", "ltc", etc., like so:
```
[{
  "name": "Bitcoin",
  "unit": "BTC",
  "value": 1.0,
  "type": "crypto"
}, {
  "name": "Ether",
  "unit": "ETH",
  "value": 33.13,
  "type": "crypto"
},
...
}]
```
Finally, I've put the console.log() inside the last .then(), since fetch() is asynchronous, and there is no guarantee that console.log(rowData) would print the newly fetched data on the console.

answered Nov 28, 2020 at 7:15

rateLess

6975 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dylan Bozarth Over a year ago

This is exactly what I needed, I will study what you have done here. Thank you!

Collectives™ on Stack Overflow

Using Ag-grid with object of nested objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related