Displaying Nested Json as individual columns on the UI Grid

Question

My rest call gives me an array of nested objects which differs for every outer object...

Example:

$scope.data = [      
                  {
                    id :5, 
                    nested : [
                      {name : 'SHOE', value : 'ABC'},
                      {name : 'TIE', value : 'DEF'}
                      ]
                   },
                   { 
                    id :6,
                    nested : [
                      {name : 'SHIRT', value : 'XYZ'},
                      {name : 'TIE', value : 'GHI'}
                      ]
                   },
                   { 
                    id :8,
                    nested : [
                      {name : 'CAP', value : 'FD1'},
                      {name : 'fixed', value : 'Domain1'}
                      ] 
                   } 
               ];

But I want it to be displayed on the grid columns as ID | SHOE| TIE| SHIRT| CAP | fixed how should I achieve this? There are 2 solutions using cellTemplate and calling a function from 'field' I am able to achieve this but there are just to many iterations and I dont want that... Also I read about Expandalable Grids, which again does not suficy this..

Plz reply... I'm not sure if this feature exists or not... This is how I have done but i need a better solution...

`

$scope.columnDefsService = ['fixed', 'SHOE', 'CAP', 'TIE',  'SHIRT', 'JEANS'];


$scope.gridOptions = { 
        enableSorting: true,
        columnDefs: [
          { name:'id', width : '50' }
        ],
        data : $scope.data   
      };

_.each($scope.columnDefsService, function(col, index){
  var temp = $scope.columnDefsService[index];
  $scope.gridOptions.columnDefs.push(
    {name : $scope.columnDefsService[index], field: 'nested[0]', cellTemplate: '<div>{{grid.appScope.fun(col,row.entity.nested)}}<div>'}
    ) 

}); 

$scope.fun = function(col, attributes){
  var temp = '';
  _.each(attributes, function(attribute){
    if(attribute.name === col.name){
      console.log('true');
      temp = attribute.value
    }
  })
  return temp;
};   

}]); 

`

Answer 1

You can use cellTemplate property in $scope.gridOptions .For this you can refer to the example below.

$scope.gridOptions = { 
        enableSorting: true,
        columnDefs: [
          { name:'id', width : '50', cellTemplate : '<button ng-repeat="record in row.entity.nested ">{{record.name }}</button>' }
        ]};