Using Services in AngularJS to return object value to controller
Question
I am trying to read names from the JSON file. I first created without services using the only controller.But then to moved the business logic to services. I am not getting a clear idea that about how to return the $scope.mydata from service to the controller. Not getting any output please help. Thank you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Add angularjs -->
<!-- Add controller script-->
<script type="text/javascript">
var app = angular.module('x2js', []);
app.controller('ctrl',
['$scope','myService',function($scope,myService){
$scope.data = function(){
myService.getData()
}
}]);
app.service('myService', ['$http','$log', function($http,$log){
this.getData = function(){
$http({
url:"student.json",
method:"GET",
dataType: 'json',
contentType: "application/json"
}).then(function(response){
$scope.myData = response.data.records;
$log.info($scope.post);
return($scope.myData);
},function(response){
$log.error("Error occured");
});
}
}])
</script>
</head>
<body ng-app="x2js">
<div ng-controller="ctrl">
<table>
<tr>
<td ng-repeat="x in Data">{{x.Name}}</td>
</tr>
</table>
</div>
</body>
</html>
2 answers
solution1
2 2017-09-23 14:22:49
Use promise $http service return promise. You need to move your then functions into controller.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Add angularjs -->
<!-- Add controller script-->
<script type="text/javascript">
var app = angular.module('x2js', []);
app.controller('ctrl',
['$scope','myService', '$log',function($scope,myService, $log){
myService.getData().then(function(response){
$scope.data = response.data.records;
$log.info($scope.data);
},function(response){
$log.error("Error occured");
})
}
}]);
app.service('myService', ['$http', function($http){
this.getData = function(){
retutn $http({
url:"student.json",
method:"GET",
dataType: 'json',
contentType: "application/json"
});
}
}])
</script>
</head>
<body ng-app="x2js">
<div ng-controller="ctrl">
<table>
<tr>
<td ng-repeat="x in data">{{x.Name}}</td>
</tr>
</table>
</div>
</body>
</html>
solution2
0 ACCPTED 2017-09-23 16:16:03
In the service, return the promise created by the .then method:
app.service('myService', ['$http','$log', function($http,$log){
this.getData = function(){
͟r͟e͟t͟u͟r͟n͟ $http({
url:"student.json",
method:"GET",
//dataType: 'json',
//contentType: "application/json"
}).then(function(response){
var myData = response.data.records;
//$log.info($scope.post);
return(myData);
},function(errorResponse){
$log.error("Error occured "+errorResponse.status);
//IMPORTANT
throw response;
});
}
}])
In the controller, extract the data from the promise:
app.controller('ctrl',
['$scope','myService',function($scope,myService){
var promise = myService.getData();
promise.then(function(data) {
$scope.data = data;
}).catch(errorResponse) {
console.log(errorResponse,status);
throw errorResponse;
});
}]);
The .then method of a promise returns a new promise which is resolved or rejected via the return value of the successCallback , errorCallback (unless that value is a promise, in which case it is resolved with the value which is resolved in that promise using promise chaining . 1
In promise error handlers, it is important to re-throw the error response otherwise the rejected promise will be converted to a fulfilled promise that returns a value of undefined .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.