Maximus Decimus Maximus Decimus - 2 months ago 6
AngularJS Question

How to load an object onload with angular

This is my html

<!DOCTYPE html>
<html x-ng-app="demo">
<head>
<title>Demo</title>
<script src="../demo/js/angular.js"></script>
<script src="../demo/js/jquery-3.1.0.js"></script>
<script src="../demo/js/jquery-3.1.0.min.js"></script>
<script src="../demo/js/bootstrap.js"></script>
<script src="../demo/js/bootstrap.min.js"></script>
<link href="../demo/css/bootstrap.css" rel="stylesheet">
<script src="../demo/js/employee_service.js"></script>
<script src="../demo/js/employee_controller.js"></script>
</head>
<body>
<form name="demo_form">
<div x-ng-controller="EmployeeController">
<h1> {{Employee.name}} </h1>
<span> </span>
<ul>
<li x-ng-repeat="address in employee.addresses">
{{address.address1}}
</li>
</ul>
</div>

</form>
</body>
</html>


This is my service script

var module = angular.module('demo', []);
module.service('EmployeeService', function($http){
this.save = function(employee){
var method = "POST";
var url = "http://localhost:8080/rest/employee/save";

$http({
method : method,
url: url,
data: angular.toJson(employee),
headers: {'Content-Type' : 'application/json'}
}).then(onSuccess, onError);

function onSuccess(response){
console.log('saved');
}

function onError(response){
console.log(response.statusText);
}
}

this.get = function(id){
var method = "GET";
var url = "http://localhost:8080/rest/employee/get/" + id;
console.log(url);

$http({
method : method,
url : url,
headers: {'Content-Type' : 'application/json'}
}).then(onSuccess, onError);

function onSuccess(response){
console.log('got it');
return response.data;
}

function onError(response){
console.log(response.statusText);
}

}

});


This is my controller

//module.controller('EmployeeController', function ($scope, $routeParams EmployeeService) { //This line give an error but it is not related to the question
module.controller('EmployeeController', function ($scope, EmployeeService) {
$scope.save = function(){
EmployeeService.save($scope.newEmployee);
$scope.newEmployee = {};
}

//var paramEmployeeID = $routeParams.params1;
var paramEmployeeID = 1;
//Here it doesn't wait for the onSuccess method from the service which will deliver the object.
$scope.employee = EmployeeService.get(paramEmployeeID);
//$scope.employee = angular.copy(EmployeeService.get(paramEmployeeID));
console.log($scope.employee);
});


The error comes when the page loads and starts with the service and then controller. That's why it tries to load first the employee then it doesn't wait for the onSuccess method and it jumps to the controller to continue and finally comes back to the service to execute the onSuccess method which executes too late because it returns the object but in the controller I already got the undefined object. How can I solve this problem?

Answer

Async issue. You can chain the promise. Try:

On the service make sure you return the promise:

this.get = function(id){
    var method = "GET";
    var url = "http://localhost:8080/rest/employee/get/" + id;
    console.log(url);

    function onSuccess(response){
        console.log('got it');
        return response.data;
    }

    return $http({
        method : method,
        url : url,
        headers: {'Content-Type' : 'application/json'}
    }).then(onSuccess, onError);

}

In the controller you can chain it to get the data that you need:

EmployeeService.get(paramEmployeeID).then(function(employee){
   $scope.employee = employee;
   console.log($scope.employee);
});