Displaying Nested Json as individual columns on the UI Grid - angularjs

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>' }
]};