306_expandable_grid - cannot read the 'data' undefined property

Question

I am working on ui-grid and 306_expandable_grid, I used the exact code as in the document, but there was an error before the problem.

app.js

$http.get('resources/data/title2.json') .success(function(data){ console.log(data); console.log(data[0].Data); console.log(data.length); for(i = 0; i < data[i].length; i++){ data[i].subGridOptions = { columnDefs: [ {name:"Title" }, {name:"Jan-10" }, {name:"Feb-10"}, {name:"Mar-10" }, {name:"Apr-10" }, {name:"May-10" }, {name:"Jun-10" }, {name:"Jul-10" }, {name:"Aug-10" }, {name:"Sep-10" }, {name:"Oct-10" }, {name:"Nov-10" }, {name:"Dec-10" } ], data: data[i].Data } } // $scope.subGridOptions.data = data; $scope.gridOptions.data = data; // $scope.title = data[0].Title; }); 

externalHtmlFile.html

 <div ui-grid="row.entity.subGridOptions" style="height:150px;"></div> 

this is a mistake I'm stuck with

  TypeError: Cannot read property 'data' of undefined at new <anonymous> (http://localhost/ng-Grid/resources/scripts/ui-grid-unstable.js:2883:41) at Object.e [as invoke] (http://localhost/ng-Grid/resources/scripts/angular.min.js:36:456) at E.instance (http://localhost/ng-Grid/resources/scripts/angular.min.js:75:118) at http://localhost/ng-Grid/resources/scripts/angular.min.js:58:276 at r (http://localhost/ng-Grid/resources/scripts/angular.min.js:7:408) at M (http://localhost/ng-Grid/resources/scripts/angular.min.js:58:260) at http://localhost/ng-Grid/resources/scripts/angular.min.js:65:412 at http://localhost/ng-Grid/resources/scripts/angular.min.js:109:276 at h.$eval (http://localhost/ng-Grid/resources/scripts/angular.min.js:123:139) at h.$digest (http://localhost/ng-Grid/resources/scripts/angular.min.js:120:220) 

when I click the plus icon, an error occurs ... I could not find a solution that I can understand. please, help

Answer 1

First, make sure that you initialize $scope.gridOptions outside the $http.get success $http.get . Add $scope.gridOptions.data[i].subGridOptions to $scope.gridOptions only in the success callback. Link :

You cannot determine grid parameters in the challenge of success. You need to define them in the area of ​​your controller, and then set data or column definitions, etc. From the challenge of success.

Secondly, make sure that the grid / page controller does not have any initialization depending on the redirection parameter. I came across the same error message generated due to the following piece of code that I had on the page:

 if (typeof clientcode === 'string' && clientcode !== '') { var payload = { clientcode : storedClientcode } } else { $location.path('/'); } 

The idea here was to check if the storedClientcode provided by the calling page (via the shared root application service), and if not, redirect it to the application home. But ui-grid seems to make separate subheadings on the page on , and these subheadings, of course, do not provide the data that I searched with my code, and so the redirection occurred behind the scene for these calls. No errors (other than what you also saw) were made, and no data was found in the grid. It took me a while to figure out (I'm pretty new to AngularJS, and this was the first ui-grid app for me). Hope this helps someone, even if this does not resolve the issue.