displaying nested json in ag-grid
Question
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>
2 answers
solution1
6 2016-04-24 09:32:44
ag-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
solution2
0 ACCPTED 2015-10-01 08:17:57
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.