UI-Grid How to access binding values in nested JSON arrays

Question

Can someone guide on the correct syntax for accessing binding values if the data is a nested JSON array. Here is the plunker for the use case http://plnkr.co/edit/tizLxnAtgqDnptiEb3mg?p=preview

Basically, as you can see here address is a collection of different addresses and I need a way to filter it similar to the Angular JS filter expression which I already tried in above and it's working. But is there some expression specific to UI Grid such as MainAttribute[childAttribute='XYZ'].value or something like that.

Issue is I'm able to retrieve filtered child attributes from the array using AngularJS expression but at the backend it's still an array and causing issue such as from front end not able to filter on that column and when you export to CSV it's giving complete JSON array for that column.

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', function ($scope) {
    var statusTemplate = "<div>{{(address | filter:{street:'303 Dove Ave'})[0].city}}</div>";

    $scope.gridOptions = {
        enableSorting: true, 
        columnDefs: [{
            name: 'firstName',
            field: 'first-name'
        }, {
            name: '1stFriend',
            field: 'friends[0]'
        }, {
            name: 'city',
            cellTemplate: statusTemplate
        }, {
            name: 'getZip',
            field: 'getZip()',
            enableCellEdit: false
        }],
        data : [{
            "first-name": "Cox",
            "friends": [
                "friend0"
            ],
            "address": [{
                street: "301 Dove Ave",
                city: "Nairobi",
                zip: "39565"
            }, {
                street: "302 Dove Ave",
                city: "Delhi",
                zip: "39565"
            }, {
                street: "303 Dove Ave",
                city: "Patna",
                zip: "39565"
            }, {
                street: "304 Dove Ave",
                city: "Jamshedpur",
                zip: "39565"
            }, {
                street: "305 Dove Ave",
                city: "Bangalore",
                zip: "39565"
            }],
            "getZip": function() {
                return this.address.zip;
            }
        }]
    };
}]);

index.html

<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" class="grid"></div>
</div>
    <script src="app.js"></script>
  </body>
</html>

score 0 · Answer 1 · answered Jun 15 '16 at 07:45

0

You can access the row's entity using "row.entity". So just change the line containing the statusTemplate:

var statusTemplate = "<div>{{(row.entity.address | filter:{street:'303 Dove Ave'})[0].city}}</div>";

This helped me a lot: http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

answered Jun 15 '16 at 07:45

eekboom

5,551
1
30
39

I tried that as mentioned in my plunker but it has brought issues which is the real question here, "How to access binding values in nested JSON arrays". You can go through my plunker link to see it in action, I'm able to get the child attributes, but try to now filter on that column it won't work. Also when you export it will bring completer JSON in the CSV/PDF file as
{{(row.entity.address | filter:{street:'303 Dove Ave'})[0].city}}
– Shoaib Khan Jun 15 '16 at 07:54

UI-Grid How to access binding values in nested JSON arrays

1 Answers1