Angular AG Grid Compressed JSON

Question

I am using AG Grid with Angualr 2 and my data from backend is not in key-value pair format.

AG Grid expects:

*rowData = [{col1: "data1", col2: "data2"},{col1:"data3", col2:"data4"}];*

In our case we are getting a compressed data from backend in the below format

*gridData  = {cols:[col1, col2], rows:[{"data1","data2"},{"data3","data4"}]}*

This force us to convert gridData to rowData at the UI level.

Is there any solution for this? we can't update rest to give the expected data.

Jarod Moser Jarod Moser · Accepted Answer · 2018-01-24T22:09:39

You would need to use the valueGetter parameter instead of the field parameter. Here is a plunker to demonstrate.

Assuming that you don't know how many columns you are receiving from your backend, or you want a versatile solution, then you just need to do this:

this.gridData  = {cols:["col1", "col2"], rows:[["data1","data2"],["data3","data4"]]};
this.columnDefs = [];
this.rowData = this.gridData.rows;
for (var i in this.gridData.cols){
  var scopeOutCurrIndex = i => (params) => params.data[i]
  this.columnDefs.push({
    headerName: this.gridData.cols[i],
    valueGetter: scopeOutCurrIndex(i)
  })
}

If you do know how many columns you will get back, then you can hard code the columnDefs like this:

this.columnDefs = [{
    headerName: "col1",
    valueGetter: (params) => params.data[1]
},
{
    headerName: "col2",
    valueGetter: (params) => params.data[2]
},
...
]

Angular AG Grid Compressed JSON

1 Answers