Displaying Array and nested json to Ag-grid using Angular 5

Question

i had a scenario to bind nested and array of json to bind ag-grid using angular 5. i tried using valueGetter on my colDefs row data as Json to bind. nothing seems to be worked out. I see no examples with documentation as well.

Here is the json and code i had till now.

Json :

{
"packages": [
{
  "packageId": 2,
  "name": "Name1",
  "isEnabled": true,
  "packageRegistrationTypes": [
    {
      "registrationType": {
        "registrationTypeId": 1,
        "description": "Reg1"
      },
      "isActive": true
    },
    {
      "registrationType": {
        "registrationTypeId": 45,
        "description": "Reg2"
      },
      "isActive": false
    }
  ]
 }
 ]
}

Angular 5 :Coldef

  {headerName: 'Package Name',checkboxSelection: true,rowGroupIndex: 0, valueGetter: params => params.data.packages[0].name},

Row values i am binding from Service, but failed to get it. should i use any different format for binding nested values and array values.

windmaomao · Accepted Answer · 2018-06-04 12:53:03Z

1

I never tried to bend the ColDef, simply just change your data format a bit after you get your raw data.

Your data is key based instead of a regular array, I would do that

.subscribe(res => {
    this.data = Object.values(res.packages);
})

answered Jun 4, 2018 at 12:53

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

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

3 Comments

Kesavarapu Venkatesh Over a year ago

This will make to loop for each record to get framed, hoping for better solution. like any in-builds in ag-grid handle these type of data

windmaomao Over a year ago

Take your post-processing data as your raw data for future usage, ex. ag-grid will never agree 100% with your server json.

Kesavarapu Venkatesh Over a year ago

Thanks mate, will go in this way

Drefus · Accepted Answer · 2018-06-04 17:13:29Z

0

Basically exactly what @windmaomao said. When you call setRowData using the agGrid api pass data.packages as a parameter :- this.gridOptions.api.setRowData(data.packages); Following that field: 'name', should work when put inside the columnDefs (so I guess there would be no need for the valueGetter any more either)

answered Jun 4, 2018 at 17:13

Drefus

1

Collectives™ on Stack Overflow

Displaying Array and nested json to Ag-grid using Angular 5

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related