How to show nested json in angular UI grid?

Question

I have a angular ui grid that I would like to display data from json, the json is nested and has a lot of information that I need to "carry" around but I only need the grid to show a selected set of the json properties, I know that I could put the json.Products into the grid but I'd rather not do that.

HTML:

<div ng-app="exampleApp">
    <section style="width:75%; margin-left:auto; margin-right:auto;" ng-controller="GridController">
    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </section>
</div>

JS:

var exampleApp = angular.module('exampleApp', ['ui.grid']);

//this would be a products grid, users would select product and add them to  a cart, the IsSelected property would be set to true.
exampleApp.controller('GridController', ['$scope', function ($scope) {
    $scope.gridOptions = {
        paginationPageSizes: [15, 25, 50, 75],
        paginationPageSize: 15,
        enableSorting: true,
        showGridFooter: true,
        columnDefs: [
            { field: 'Products.ProductCode', name: 'Products.ProductCode', width: '200', displayName: 'PRODUCT CODE'},
            { field: 'Products.ProductName', name: 'Products.ProductName', displayName: 'PRODUCT NAME'}
        ],

        onRegisterApi: function(gridApi) {
                $scope.gridApi = gridApi;
        }
    };

  var sResult = JSON.stringify(gridData);
  var parsedResult = JSON.parse(sResult);
  $scope.AllProductData = parsedResult;
  $scope.productData = parsedResult.Products;
  $scope.gridOptions.data = $scope.AllProductData;
  console.log("AllProductData: " + JSON.stringify($scope.AllProductData));
}]);

//user would change quantity and maybe some other properties for items in their cart and then checkout which sends all data back to server.
/*
I dont want to do something like:
$scope.gridOptions.data: gridData.Products;
because I need to send all the data back to server that I recieved in my ajax call.
I'd like to have the grid just get what it needs from the json.
*/

var gridData = [{
    "Products": [{
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Green",
        "QuantityAvailable": null,
        "ProductName": "10 Pin Connector, Digital Board",
        "ProductId": "01td0000001skXZAAY",
        "ProductCode": "7149",
        "PricebookEntryId": "01ud0000005tOgzAAE",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }, {
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Green",
        "QuantityAvailable": null,
        "ProductName": "10 Prepaid worm",
        "ProductId": "01td0000001sks9AAA",
        "ProductCode": "805514-PPD",
        "PricebookEntryId": "01ud0000005tLZHAA2",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }, {
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Red",
        "QuantityAvailable": 0,
        "ProductName": "10x1 ITALIAN DIAGNOSTIC KIT",
        "ProductId": "01td0000001sl03AAA",
        "ProductCode": "902232-ITA",
        "PricebookEntryId": "01ud0000005tP99AAE",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }, {
        "RecordType": "012d0000000xBIOAA2",
        "QuantityFlag": "Red",
        "QuantityAvailable": 0,
        "ProductName": "10x1 SPAIN DIAGNOSTIC KIT",
        "ProductId": "01td0000001sl0KAAQ",
        "ProductCode": "902232-SPN",
        "PricebookEntryId": "01ud0000005tPENAA2",
        "IsSelected": false,
        "IsCommonItem": false,
        "Active": true
    }],
    "CustomerId": "006q0000007KyVnAAK",
    "AccountId": "1035620"
}];

See FIDDLE

See Updated Fiddle Showing that grid working with the account id but not the nested products. I added this fiddle to help people understand why I dont want to use something like $scope.gridOptions.data = grid[0].products;

If what I am doing is not possible without using subgrids than please advise how I would keep the json structure intact while changing the property on the products.IsSelected to True without looping etc. I need to make sure that the gridData.Products still refers to the original gridData... if that makes sense.

Prinay Panday · Accepted Answer · 2017-01-04 18:17:34Z

1

Tested on Fiddle.

var exampleApp = angular.module('exampleApp', ['ui.grid']);

//this would be a products grid, users would select product and add them to   a cart, the IsSelected property would be set to true.
exampleApp.controller('GridController', ['$scope', function ($scope) {
$scope.gridOptions = {
    paginationPageSizes: [15, 25, 50, 75],
    paginationPageSize: 15,
    enableSorting: true,
    showGridFooter: true,
    columnDefs: [
        { field: 'ProductCode', name: 'Products.ProductCode', width: '200', displayName: 'PRODUCT CODE'},
        { field: 'ProductName', name: 'Products.ProductName', displayName: 'PRODUCT NAME'}
    ],

    onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
    }
};

 $scope.gridOptions.data = gridData[0].Products;
}]);

//user would change quantity and maybe some other properties for items in their cart and then checkout which sends all data back to server.

 /*
I dont want to do something like:
 $scope.gridOptions.data: gridData.Products;
 because I need to send all the data back to server that I recieved in my ajax call.
 I'd like to have the grid just get what it needs from the json.
*/

 var gridData = [{
"Products": [{
    "RecordType": "012d0000000xBIOAA2",
    "QuantityFlag": "Green",
    "QuantityAvailable": null,
    "ProductName": "10 Pin Connector, Digital Board",
    "ProductId": "01td0000001skXZAAY",
    "ProductCode": "7149",
    "PricebookEntryId": "01ud0000005tOgzAAE",
    "IsSelected": false,
    "IsCommonItem": false,
    "Active": true
}, {
    "RecordType": "012d0000000xBIOAA2",
    "QuantityFlag": "Green",
    "QuantityAvailable": null,
    "ProductName": "10 Prepaid worm",
    "ProductId": "01td0000001sks9AAA",
    "ProductCode": "805514-PPD",
    "PricebookEntryId": "01ud0000005tLZHAA2",
    "IsSelected": false,
    "IsCommonItem": false,
    "Active": true
}, {
    "RecordType": "012d0000000xBIOAA2",
    "QuantityFlag": "Red",
    "QuantityAvailable": 0,
    "ProductName": "10x1 ITALIAN DIAGNOSTIC KIT",
    "ProductId": "01td0000001sl03AAA",
    "ProductCode": "902232-ITA",
    "PricebookEntryId": "01ud0000005tP99AAE",
    "IsSelected": false,
    "IsCommonItem": false,
    "Active": true
}, {
    "RecordType": "012d0000000xBIOAA2",
    "QuantityFlag": "Red",
    "QuantityAvailable": 0,
    "ProductName": "10x1 SPAIN DIAGNOSTIC KIT",
    "ProductId": "01td0000001sl0KAAQ",
    "ProductCode": "902232-SPN",
    "PricebookEntryId": "01ud0000005tPENAA2",
    "IsSelected": false,
    "IsCommonItem": false,
    "Active": true
}],
"CustomerId": "006q0000007KyVnAAK",
"AccountId": "1035620"
}];

This also does not manipulate your gridData object but just the products inside because from what I understand you want to send that back to the server? More clarity required on that if it is required after this.

edited Jan 4, 2017 at 18:17

answered Jan 4, 2017 at 18:12

Prinay Panday

2262 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Devnsyde Over a year ago

You are doing what I said I didn't want to do, you are piping the gridData.Products into the grid, I want to give the grid all the gridData and then only use the products part of it. Your example is no different then: $scope.AllProductData = parsedResult; $scope.gridOptions.data = $scope.AllProductData; shown in my example.

Prinay Panday Over a year ago

Sorry misunderstood that part, wasn't entirely sure what you meant. You'd probably want to look into expandable then. ui-grid.info/docs/#/tutorial/306_expandable_grid or using a rowTemplate and cellTemplate per product in the grid data. Out of interest what is the purpose of supplying the grid the entire gridData object if you only want it to use the Products array?

Devnsyde Over a year ago

Yea I get that, my back end developer insists that the json is in proper format, and wants the json back as it was sent, I just need to show specific things, lets end users make specific changes and then send everything back with those changes, the backend developer insists this is the right way so that no data is unnecessarily repeated. I'd prefer the json to be flatter with the account Id and customerId repeated for each product. - I definitely don't want any type of subgrid.

Devnsyde · Accepted Answer · 2017-01-04 19:57:35Z

0

I did some testing and found that even though I was accessing the nested products to display data and make changes to the json object the nested access knows about the original data, I didn't know there was a relationship between gridData and gridData.Products, I thought that gridData.Products was a copy and to make changes to gridData I would need to loop through each of the products in gridData, find a specific product by Id and then set its IsSelected to true.

So long story short, never mind my question.

answered Jan 4, 2017 at 19:57

Devnsyde

1,3571 gold badge14 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to show nested json in angular UI grid?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related