My current setup involves fetching a JSON file through a service to serve as the data source for my grid. The service successfully fetches the data, and the grid renders its basic layout correctly. However, there seems to be an issue with populating the grid with the fetched data. I need a way to asynchronously retrieve data from a service and use it to populate my grid. How can this be achieved?
In my app.js file:
var app = angular.module('myApp', ['ngGrid']);
//service call to get the data
app.service('MyService',function($http){
var get = function(){
return $http.get('data.json');
}
return {
get: get
}
});
//controller where the grid is located
app.controller('NewController',function($scope,MyService) {
$scope.get = MyService.get;
$scope.message = "this is the new controller message";
$scope.gridOptions = {
data: $scope.get
}
var getData = function() {
$scope.get().then(function (data) {
$scope.gridOptions.data = data['data'];
console.log('from the success handler');
console.log($scope.gridOptions.data);
}, function (reason) {
console.log('failed: ');
console.log(reason)
})
}
getData();
});
//not relevant in this example
app.controller('MyCtrl',function($scope){
$scope.data = "This is some data";
})
For the HTML:
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link rel="stylesheet" type="text/css" href="css/ng-grid.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="libs/jquery-1.9.1.js"></script>
<script src="libs/jquery-ui-1.9.1.custom.min.js"></script>
<script src="libs/angular-1.2.js"></script>
<script src="libs/ng-grid-2.0.11.debug.js"></script>
<script src="scripts/app.js"></script>
<style>
.gridStyle {
width: 400px;
height: 300px
}
</style>
</head>
<body >
<div ng-controller="NewController">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</body>
No errors are showing up in the console, but it appears that the gridOptions are not being set as expected in the success handler. The data being received is correct, and all logs show up fine in the console. How can I effectively utilize my service to populate an ngGrid table?