6

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>
manjunath
  • 73
  • 1
  • 1
  • 5

2 Answers2

12

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

Antoni4
  • 2,535
  • 24
  • 37
mike mckechnie
  • 844
  • 8
  • 14
  • What do you suggest if `defaultColumns1` is an array and all I need is `defaultColumns1[0].fieldName`? – Samarth Agarwal Jan 03 '17 at 12:02
  • Simplest is probably a value getter, i.e. `valueGetter: 'defaultColumns1[0].fieldName'` (assuming "defaultColumns" is an array on your node.data. For more complicated work, I've found custom editors are very handy - those let you write an initializer, a gui constructor, entry and exit handlers, etc. – mike mckechnie Jan 17 '17 at 08:15
  • From what I tried doing field: 'defaultColumns1.region' will also work in latest AG-grid. – Antoni4 Feb 22 '19 at 15:22
0

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.

Jax
  • 1,839
  • 3
  • 18
  • 30
  • Thanks for your kind response. i understand your point here. i was looking for mapping json fields directly to the row data without iterating the json object as what you had explained above.. when we use jqgrid, we can directly map nested json object to rowdata by defining the path in the colDefs. i was looking for something like that. i think, ag-grid doesn't support mapping nested json object mapping. – manjunath Oct 01 '15 at 16:41
  • i get nested json object from server. just for illustration purpose, i have provided simple nested json object in my above example. – manjunath Oct 01 '15 at 16:49
  • The answer provided answers the question as originally posted. If thats the case accepting the answer is customary. If you have a different use case then you should ask a new question. – Jax Oct 01 '15 at 16:53
  • thanks for your quick response, Jax :) i will accept this answer. – manjunath Oct 02 '15 at 08:20
  • 1
    i have changed the data structure in server side and used your approach, problem is solved. Thanks much :) – manjunath Oct 02 '15 at 08:30