How to view the last index in array of object in row grouping - ag-grid-vue

Question

I Have object that contains array of objects as follow :

{
  "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": "1234568",
      
    }
  ]
}

I want to view 'filed4' filed from the last index in config array - 1234568.

This is what i tried to do but i get: [object][object]

this.gridColumns.push({
        headerName: "field4",
        field: "Config",
        width: 60,
        keyCreator: params => params.value[params.value.length-1].field4
      });

More code:

setGridColumns() {

      this.gridColumns.push({
        headerName: "Id",
        field: "Id",
        tooltipField: "Id",
        resizable: true,
      });
       this.gridColumns.push({
       headerName: "Name",
       rowGroup: true,
       field: "Name",
       tooltipField: "Name",
       resizable: true,
      });
       this.gridColumns.push({
       headerName: "email",
       field: "email",
       tooltipField: "email",
       resizable: true,
      });
      this.gridColumns.push({
        headerName: "field4",
        field: "Config",
        width: 60,
        keyCreator: params => params.value[params.value.length-1].field4
      });
      return this.gridColumns;
    },
  },

Any idea what can be the problem ?

Answer 1

keyCreator is used with rowGroup here. So, please remove keyCreator and add valueGetter for Config field like below:

this.gridColumns.push({
   headerName: "field4",
   field: "Config",
   width: 60,
   valueGetter: params => {
      if (params.data !== undefined) {
         return params.data.Config[params.data.Config.length - 1].field4
      }
   }
});