javascript - displaying nested json in ag-grid -
i using angular grid (ag-grid) display data. trying display nested json data in angular grid. unsuccessful.
below sample json data , coldefs. please suggest why dot operator not working unlike jqgrid, map grid columns 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>
there few issues way went through data. $scope.mydata array of objects, therefore need either iterate on or dig data index. $scope.gripoptions not quite right. followed ag-grid docs
take @ updated plunker. code pretty basic think want. can create function iterate on array (leave 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 @ way $scope.gridoptions constructed ( suggested in docs.)
hope helps.
Comments
Post a Comment