Using AngularJs Promise to Retrieve and Store an Entity - angularjs

Question

Following submission of a form to an AngularJS controller method, I need to take the value of a select menu (which in this case is the entity id) and retrieve that entity from my REST endpoint. I understand that when I use $http.get, the data is being retrieve asynchronously and so storing this data can be tricky.
I have been trying to follow a few articles which cover promises and deferring but I haven't quite gotten it right yet.
In the following example, I want to come away with a Room object. Right now, I'm just getting an empty object as seen here:
{"room":{},"user":{"userId":1,"userName":"tom","links":[{"rel":"self","href":"http://localhost:8080/libroomreserve/api/user/1"}]},"startTime":"2011-01-10 00:00:00","endTime":"2011-01-10 00:00:00","note":"weewwe"}
This is my controller method:
$scope.newReservation = function(){
var packagedUser = reservationService.fetchRoomObj($scope.reservation.room).then(function(roomObj){
return roomObj;
});
var finalReservation = {
room: packagedUser,
user: $scope.reservation.user,
startTime: $scope.reservation.startTime,
endTime: $scope.reservation.endTime,
note: $scope.reservation.note
};
reservationService.addReservation(
finalReservation,
function(data){
console.log("Success!");
$state.go("home");
},
function(data){
console.log("Failure!");
}
);
};
As you can see, I am trying to use the promise from my factory service's method (below) to retrieve the object.
reservations.fetchRoomObj = function(room){
return $http.get("/libroomreserve/api/room/" + room).then(function(response){
console.log("success http!");
console.log(response);
return response;
});
};
My console.log() calls return the object just fine so I know my only error is in properly storing my response data to a variable.
Here's the actual HTML form if that helps...
<form ng-submit="newReservation()">
<div class="form-group">
<label>Start </label>
<input type="text" ng-model="reservation.startTime" class="form-control">
</div>
<div class="form-group">
<label>End </label>
<input type="text" ng-model="reservation.endTime" class="form-control">
</div>
<!--<div class="form-group">
<label>User </label>
<input type="number" ng-model="reservation.user" class="form-control">
</div>-->
<div class="form-group">
<label>Room </label>
<select ng-model="reservation.room" class="form-control">
<option ng-repeat="room in roomsList" value="{{ room.roomId }}">{{ room.roomNumber }}</option>
</select>
</div>
<div class="form-group">
<label>Note</label>
<textarea ng-model="reservation.note" class="form-control"></textarea>
</div>
<button class="btn btn-success" type="submit">Reserve</button>
</form>
JSFiddle Here

Answer 1

You need to continue your code only after the call of then() method:
$scope.newReservation = function() {
reservationService.fetchRoomObj($scope.reservation.room).then(function(roomObj) {
var finalReservation = {
room: roomObj,
user: $scope.reservation.user,
startTime: $scope.reservation.startTime,
endTime: $scope.reservation.endTime,
note: $scope.reservation.note
};
reservationService.addReservation(
finalReservation,
function(data){
console.log("Success!");
$state.go("home");
},
function(data){
console.log("Failure!");
}
);
});
};
I used the roomObj directly to make the finalReservation object, and then, I call the addReservation() function.

Answer 2

The $http legacy promise method "success" have been deprecated. Use the standard "then" method instead.
return $http.get("/libroomreserve/api/room/" + room).then(function(response){
console.log("success http!");
console.log(response.data);
return response.data;
});