How to handle nested array of Object in ag grid(angular)

Question

I am using ag-grid in angular6 i am getting the nested array of object in the same row i need to display the multiple record for some particular field

{
  "Id": "123",
  "Name": "usb",
  "email": "[email protected]",
  "Config": [
    {
      "config": "config1",
      "field2": "1",
      "field3": "1",
      "field4": "1",
      
    },
    {
      "config": "config2",
      "field2": "3",
      "field3": "3",
      "field4": "3",
      
    }
  ]
},
{
  "Id": "123",
  "Name": "usb",
  "email": "[email protected]",
  "Config": [
    {
      "config": "config1",
      "field2": "1",
      "field3": "1",
      "field4": "1",
      
    },
    {
      "config": "2",
      "field2": "3",
      "field3": "3",
      "field4": "3",
      
    },
    {
      "field1": "2",
      "field2": "3",
      "field3": "3",
      "field4": "3",
      
    }
  ]
}

in that above object when i reach the config field need to display like below in that config count is dynamic

dileepkumar jami · Accepted Answer · 2019-02-04 11:38:10Z

1

you might need to use the CellRenderers provided by ag-grid

So in your columnDefs, for the fields like config and fields, you need to use the cellRendererFramework like below.

  {
    headerName: 'config',
    field: 'config',
    cellRendererFramework: YourRenderer
  }

and in your YourRenderer, it would be like below:

@Component({
  selector: 'your-renderer',
  template: `
   <div> the way you wanted to display the config </div>
  `
})
export class YourRenderer implements ICellRendererAngularComp {
  public params: ICellRendererParams;

  public agInit(params: ICellRendererParams): void {
    this.params = params.value;
  }

  public refresh(params: ICellRendererParams): boolean {
    return false;
  }
}

answered Feb 4, 2019 at 11:38

dileepkumar jami

2,26516 silver badges16 bronze badges

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

2 Comments

Arun Kumar Over a year ago

it's working but only one record is coming (ngfor retriving first record only

dileepkumar jami Over a year ago

I did not understand. It would be better if you post your code on stackblitz and share

Collectives™ on Stack Overflow

How to handle nested array of Object in ag grid(angular)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related