how to show complex json like nested in ng-grid Using Angular

Question

i have json like that as i shown below as well as how to iterate inner items like i explicitly use [0] index but if we have 10 20 or too much so how can we handle what will be iteration process.

Also created Example in plunker but not getting how to itered instead of static values.

http://plnkr.co/edit/wnzjFc?p=preview

JSON:

[
  {
    "name": "test",
    "items": [
      {
        "itemName": "sdf",
        "ItemId": "12ad",
      },
      {
        "itemName": "dfs",
        "itemId": "12ad",
      }
    ],
    "qty": "5",
    "_id": "sdfd123"
  },
  {
    "name": "test",
    "items": [
      {
        "itemName": "sdf",
        "ItemId": "12ad",
      },
      {
        "itemName": "dfs",
        "itemId": "12ad",
      }
    ],
    "qty": "5",
    "_id": "sdfd123"
  }
]

i wanted template like this that u can see in image url but how to accomplish from above json to implement that i shown in image can any one create in example in plunker i will be really grateful because i never seen still nested json like that .

http://i.imgur.com/e36tC16.png

i also tried this but not getting any thing if some one can make exampe must be appreciated it will also help for others.

i also tried someting like this but not getting any data as well as how to iterate.

 $rootScope.stores = [];

        $scope.shoppingListGrid = {
            data: 'purchaseItems',
            jqueryUITheme: true,
            columnDefs:
                [
                    {field:'name', displayName:'Store Name'},
                    {field:'items[0].item_id.name', displayName:'Item Name'},
                    {field:'qty', displayName:'Quantity'},
                    {field:'unit', displayName:'Unit'},
                    {field:'', displayName:'', cellTemplate: '<a ng-click="openPurchaseModel(row.entity._id)" id="edit"  data-toggle="tooltip"><i class="icon-plus-sign" ></i>Purchase Item</a>' },
                    {field:'', displayName:'', width:'8%', height:'4%' , cellTemplate: '<a ng-click="openShoppingModal(row.entity._id)" id="edit"  data-toggle="tooltip"><i class="fa fa-pencil fa-fw colorInfo" ></i></a><a ng-click="shopingdelete(row.entity._id)"  id="delete"  data-toggle="tooltip"><i class="icon-trash"></i></a>'}

                ]
        };

Answer 1

$scope.shoppingListGrid = {
    data: 'purchaseItems',
    jqueryUITheme: true,
    columnDefs: [
        {field: 'name', displayName: 'Store Name'},
        {field: 'items[0].item_id.name', displayName: 'Item Name'},
        {field: 'qty', displayName: 'Quantity'},
        {field: 'unit', displayName: 'Unit'},
        {field: '', displayName: '', cellTemplate: '<a ng-click="openPurchaseModel(row.entity._id)" id="edit" data-toggle="tooltip"><i class="icon-plus-sign"></i>Purchase Item</a>'},
        {field: '', displayName:'', width:'8%', height:'4%', cellTemplate: '<a ng-click="openShoppingModal(row.entity._id)" id="edit" data-toggle="tooltip"><i class="fa fa-pencil fa-fw colorInfo"></i></a><a ng-click="shopingdelete(row.entity._id)" id="delete" data-toggle="tooltip"><i class="icon-trash"></i></a>'},
        {field: 'items', displayName: 'items', cellTemplate: '<div data-ng-grid="gridOptions1"></div>'}
    ]
};

$scope.gridOptions1 = {        
    plugins: [new ngGridFlexibleHeightPlugin()],
    data: 'row.getProperty(col.field)',
    columnDefs: [
        {field: 'itemName', displayName: 'itemName'},
        {field: 'itemId', displayName: 'itemId'}
    ]
};