I am using Angular Grid (ag-grid) to display data. i am trying to display nested json data in my angular grid. but i was unsuccessful.
below is the sample json data and colDefs. please suggest that why dot operator is not working unlike jqgrid, to map grid columns with nested json fields.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.myData = [{
"defaultColumns1": {"region":"PA"},
"defaultColumns2": {"LocationName": "loc1",
"LegalName": "legName1"
}
},
{
"defaultColumns1": {"region":"PB"},
"defaultColumns2": {"LocationName": "loc2",
"LegalName": "legName2"
}
}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'defaultColumns1.region',
displayName: 'Region'
}, {
field: 'defaultColumns2.LocationName',
displayName: 'Location',
headerGroup: 'address'
}, {
field: 'defaultColumns2.LegalName',
displayName: 'Legal Name',
headerGroup: 'address'
}],
enableColumnResize: true,
groupHeaders : true
}
}]);
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link rel="stylesheet" href="../dist/ag-grid.css" />
<script src=".0.2/jquery.js"> </script>
<script src=".2.15/angular.js"></script>
<script src="../dist/ag-grid.min.js"></script>
<link href="//netdna.bootstrapcdn/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ag-grid="gridOptions"></div>
</body></html>
I am using Angular Grid (ag-grid) to display data. i am trying to display nested json data in my angular grid. but i was unsuccessful.
below is the sample json data and colDefs. please suggest that why dot operator is not working unlike jqgrid, to map grid columns with nested json fields.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.myData = [{
"defaultColumns1": {"region":"PA"},
"defaultColumns2": {"LocationName": "loc1",
"LegalName": "legName1"
}
},
{
"defaultColumns1": {"region":"PB"},
"defaultColumns2": {"LocationName": "loc2",
"LegalName": "legName2"
}
}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'defaultColumns1.region',
displayName: 'Region'
}, {
field: 'defaultColumns2.LocationName',
displayName: 'Location',
headerGroup: 'address'
}, {
field: 'defaultColumns2.LegalName',
displayName: 'Legal Name',
headerGroup: 'address'
}],
enableColumnResize: true,
groupHeaders : true
}
}]);
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link rel="stylesheet" href="../dist/ag-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"> </script>
<script src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script src="../dist/ag-grid.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ag-grid="gridOptions"></div>
</body></html>
- Your html pls. A plunkr would be great help. – Jax Commented Sep 30, 2015 at 8:53
- @Jax i have added the html code. kindly, have a look – manjunath Commented Sep 30, 2015 at 9:49
- im badly struck at this point. can somebody suggest me workaround for my issue. it would be a great help.. – manjunath Commented Sep 30, 2015 at 13:55
- can you create a fiddle o plunkr – Jax Commented Sep 30, 2015 at 14:34
- plnkr.co/edit/mVOIYly9BKFtBC4CJtrY?p=preview – manjunath Commented Oct 1, 2015 at 6:09
3 Answers
Reset to default 13ag-grid field attribute can only refer to a property of the data row, but the valueGetter attribute allows expressions. So, while
field: 'defaultColumns1.region'
won't work, switching to
valueGetter: 'data.defaultColumns1.region'
will work fine. Sample plunker forked from yours is at http://plnkr.co/edit/8enzrjt2MQwfa8VjGaIy?p=preview
There were a few issues with the way you went through your data. $scope.myData is an array of objects, therefore you need to either iterate over it or dig data by index. Also your $scope.gripOptions was not quite right. I just followed the ag-grid docs
Take a look at this updated plunker. The code is pretty basic but it does what I think you want. You can always create a function to iterate over the array (leave that as homework :-))
$scope.myData = [{
"defaultColumns1": {
"region": "PA"
},
"defaultColumns2": {
"LocationName": "loc1",
"LegalName": "legName1"
},
"name": "name1"
}, {
"defaultColumns1": {
"region": "PB"
},
"defaultColumns2": {
"LocationName": "loc2",
"LegalName": "legName2"
},
"name": "name2"
}];
var columnDefs = [{
headerName: 'Region',
field: 'region'
}, {
headerName: 'Location',
field: 'location'
}, {
headerName: 'Legal name',
field: 'legal_name'
}]
var rowData = [{
region: $scope.myData[0].defaultColumns1.region,
location: $scope.myData[0].defaultColumns2.LocationName,
legal_name: $scope.myData[0].defaultColumns2.LegalName
}, {
region: $scope.myData[1].defaultColumns1.region,
location: $scope.myData[1].defaultColumns2.LocationName,
legal_name: $scope.myData[1].defaultColumns2.LegalName
}, ]
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
Take a look at the way $scope.gridOptions is now constructed ( as suggested in the docs.)
Hope it helps.
Rendering nested objects as strings with cellRenderer
If e.g. for testing purposes you are fine with just displaying the nested element as string, you can check if the element is nested and just call JSON.stringify() on it. Note that in this code, I extract the keys automatically from the first element for convenience.
// Extract payload keys
const payloadKeys = Object.keys(mydata.result[0].payload);
// Custom cell renderer
function customRenderer(params) {
const nestedKey = Object.keys(params.data.payload).find(key => typeof params.data.payload[key] === 'object');
const value = params.data.payload[params.colDef.field.split('.')[1]];
if (params.colDef.field.endsWith(`.${nestedKey}`)) {
return typeof value === 'object' ? JSON.stringify(value) : value; // Render nested element as string
} else {
return value;
}
}
// Update column definition
const columnDefs = [
...payloadKeys.map(key => ({
headerName: key,
field: `payload.${key}`,
maxWidth: 300,
editable: true,
valueGetter: params => params.data.payload[key],
tooltipValueGetter: (params) => params.value,
filter: true,
autoHeight: true,
cellRenderer: customRenderer // Use the custom cell renderer
})),
];