Displaying Nested Json as individual columns on the UI Grid
<p>My rest call gives me an array of nested objects which differs for every outer object... </p>

<p>Example:</p>

<pre><code>$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'}
                      ] 
                   } 
               ];
</code></pre>

<p>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 <strong>cellTemplate</strong> 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..</p>

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

<p>`</p>

<pre><code>$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: '&lt;div&gt;{{grid.appScope.fun(col,row.entity.nested)}}&lt;div&gt;'}
    ) 

}); 

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

}]); 
</code></pre>

<p>`</p>