The service is returning data (the raw $http response) rather than result (the processed version I want to pass back to my controller), why is the code inside promise being ignored?
///in controller
Romanize.get($scope.currentMaterial).then(function(d){
$scope.romanized = d;
});
//service
app.factory('Romanize', ['$http', 'Position', function($http, Position){
return{
get: function(query){
var url= Position.sections[Position.sectionNumber].romanizeService + "?korean=" + query;
var promise = $http.get(url).success(function(data) {
var parts = $(data).find("span");
var array = [];
for (var x = 0; x<parts.length; x++){
array.push(parts[x].title);
}
var result = array.join("");
return result;
});
return promise;
}
};
}]);
success handler does not provide chain. You should use then:
var promise = $http.get(url).then(function(data) {
var parts = $(data).find("span");
// ...
return result;
});
Related
I have a newbie question here.
I am coding a factory in angularJS. With it I want to have a list of users, and also a method to fill it.
So this is my code ...
The factory
app.factory("usuariosFactory", function ($http) {
var f = {};
f.users = [];
f.getUsers = function (callback) {
var token = window.localStorage.getItem("_token");
$http.get("http://localhost:8000/api/user/list?token=" + token).then(function (response) {
f.users = response.data.users;
/* the console.log outputs OK with the users from the server */
console.log(f.users);
});
};
return f;
});
The controller
app.controller("usuariosController", function ($scope, usuariosFactory) {
var scope = this;
/* link users from factory to controllerś scope .. NOT WORKING */
usuariosFactory.getUsers();
scope.usuarios = usuariosFactory.users;
});
I am hitting my head to the desk right now. I dont understand how to achieve this.
You should just return the promise from the factory to controller
Then in controller, you should subscribe to that promise and assign data to your scope variable
Factory:
app.factory("usuariosFactory", function ($http) {
var f = {};
f.users = [];
f.getUsers = function (callback) {
var token = window.localStorage.getItem("_token");
return $http.get("http://localhost:8000/api/user/list?token=" + token);
};
return f;
});
Controller:
app.controller("usuariosController", function ($scope, usuariosFactory) {
var scope = this;
usuariosFactory.getUsers().then(function (response) {
scope.usuarios = response.data;
});
});
The usuariosFactory.getUsers is an asynchronous function, due to $http.get inside. So, to have your data, you have to use the callback function that you've already put in the getUsers. The code should be like:
usuariosFactory.getUsers(function () {
scope.usuarios = usuariosFactory.users;
});
and after the f.users = response.data.users; you have to call the callback function. Like this:
f.getUsers = function (callback) {
var token = window.localStorage.getItem("_token");
$http.get("http://localhost:8000/api/user/list?token=" + token).then(function (response) {
f.users = response.data.users;
callback();
});
};
That way you will handle ansynchronous functions with a callback funtion. Another way to do this is with promises, in that way, your code should be like this:
The factory
app.factory("usuariosFactory", function ($http, $q) {
var f = {};
f.users = [];
f.getUsers = function (callback) {
var token = window.localStorage.getItem("_token");
var deferred = $q.defer(); // Creates the object that handles the promise
$http.get("http://localhost:8000/api/user/list?token=" + token)
.then(function (response) {
f.users = response.data.users;
deferred.resolve('You can pass data!'); // Informs that the asynchronous operation have finished
});
return deferred.promise; // Returns a promise that something will happen later
};
return f;
});
The controller
app.controller("usuariosController", function ($scope, usuariosFactory) {
var scope = this;
// Now you can use your function just like you use $http
// This way, you know that watever should happen in getUsers, will be avaible in the function
usuariosFactory.getUsers()
.then(function (data) {
console.log(data) // Print 'You can pass data!'
scope.usuarios = usuariosFactory.users;
});
});
This is the service where im saving the data and returning the result
nurseService.js
(function () {
'use strict';
angular.module('app.services')
.factory('NurseService', NurseService);
NurseService.$inject = ['$http', '$q','Constants'];
function NurseService($http, $q, Constants){
var service = {
saveSample:saveSample
};
return service;
function saveSample(data) {
var deferred = $q.defer();
$http({method:"POST", data:data, url:Constants.API_URL_SAVE_SAMPLE_COLLECATION}).then(function(result){
return deferred.resolve(result.data);
});
};
return deferred.promise;
}
})();
This is the controller where im using the return value and based on the value returned im calling another http get method and printing it.
vm.saveSamples = function() {
var data = {
visitId: visitId,
orders: vm.gridTestApi.selection.getSelectedRows()
};
var url = Constants.API_URL_SAVE_SAMPLE_COLLECATION;
var barCodeResponse = null;
var sampleId = "";
var myDataPromise = NurseService.saveSample(data);
myDataPromise.then(function(result) {
console.log("data.name"+ JSON.stringify(result));
vm.printBarCode(result.sampleId);
// if(sampleId != ""){
printElement("printThisElement");
// }
});
//Barcode method this should call after saving the data and returned the sampleId
vm.printBarCode = function(sampleId) {
$http.get("master/barcode/"+sampleId).then(function (response) {
vm.barCodeImage = angular.copy(response.data.result);
});
}
But here before the saving print is calling. How can I hadle so that the first call should finish before the second http call to barcode and print it
//Print code
function printElement(elem) {
var printSection = document.getElementById('printSection');
// if there is no printing section, create one
if (!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}
var elemToPrint = document.getElementById(elem);
// clones the element you want to print
var domClone = elemToPrint.cloneNode(true);
printSection.innerHTML = '';
printSection.appendChild(domClone);
window.print();
window.onafterprint = function () {
printSection.innerHTML = '';
}
};
You have to return the $http call in printBarCode and use a .then like so:
//Barcode method this should call after saving the data and returned the sampleId
vm.printBarCode = function(sampleId) {
return $http.get("master/barcode/"+sampleId).then(function (response) {
vm.barCodeImage = response.data.result;
});
}
myDataPromise.then(function(result) {
console.log("data.name"+ JSON.stringify(result));
return vm.printBarCode(result.sampleId)
}).then(
function() {
printElement("printThisElement");
},
function(error) {
// error handler
}
);
printElement will now wait for the printBarCode promise and .then to fulfil before executing.
You also don't have to use a $q.defer when doing a $http call, $http is already a promise so you can just return that like so:
function saveSample(data) {
return $http({method:"POST", data:data, url:Constants.API_URL_SAVE_SAMPLE_COLLECATION})
.then(
function(result) {
return result.data;
},
function(error) {
// don't forget to handle errors
}
);
}
First of all, $http internally implements promises you you dont have to explicitly create them.
Secondly, you should put all your http requests in the service/factory
The modified code looks like
angular.module('app.services')
.factory('NurseService', function($http){
var service = {
saveSample : function(data){
//first http implementation here
return $http.post(....);
}
getBarcode : function(sampleId){
//http implementation here for barcode
return $http.get(....);
}
}
return service;
});
and your controller can use the service like
angular.module('app.services')
.controller('saveSampleCtrl',function($scope,NurseService){
var postData = {
//your post data here
}
NurseService.saveSample(postData)
.then(function(data){
//read sampleId here from data
var sampleId = data.sampleId;
NurseService.getBarcode(sampleId)
.then(function(){
//your print statement here
});
});
}
there might be typos in the code but this is just a basic idea on how you could do that. Hope it helps
I have created the service below.
app.factory('userProfileFactory', ['FBDB', 'searchParam', function(FBDB, searchParam) {
var personalKey;
return {
userProfile: function(searchEmail) {
var deferred = $q.defer();
var FBref = new Firebase(FBDB).child('items');
var promise = FBref.orderByChild('email')
.startAt(searchEmail)
.endAt(searchEmail)
.on('value', function(snapshot) {
var data = snapshot.val();
personalKey = Object.keys(data)[0];
deferred.resolve(personalKey);
});
return deferred.promise;
}
};
}]);
My Controller is as below. The issue is that it takes a moment for results to be returned. So when the $save function is called outside factory function, it reports an 'undefined variable'. How can I make it work when $save is outside?
app.controller('profileCtrl', ['userProfileFactory', 'FBDB', '$firebaseArray', function(userProfileFactory, FBDB, $firebaseArray) {
var FBref = new Firebase(FBDB).child('items');
userProfileFactory.userProfile().then(function(res){
var personalKey = res;
item.personalKey = res;
//$firebaseArray(FBref)$save(item); It works here. But moved this from here...
})
$firebaseArray(FBref)$save(item); //...to here. It does not work.
}]);
In your code, the line:
$firebaseArray(FBref)$save(item);
will execute before the resolve function:
function(res){
var personalKey = res;
item.personalKey = res;
}
The resolve function waits for the userProfileFactory.userProfile() promise to resolve (data to be returned) before executing, whereas the firebase.save line does not. You need to put it back inside of the then(resolve) function.
I am returning an $http.get object from a service to a controller.
function in the geturl service -
this.fetch = function(index){
var url = some_url;
return $http.get(url,{timeout:8000});
};
In the controller I have --
var request = geturl.fetch(0);
request.success(function(data,status,headers,config){
// some logic
}).error(function(data,status,headers,config){
// some logic
});
$scope.promise.push(request); // $scope.promise is an array which contains all the promises
whenAll($scope.promise).done(function(){
});
function whenAll -
function whenAll(promises) {
var i, data = [],
dfd = $.Deferred();
for (i = 0; i < promises.length; i++) {
promises[i].done(function(newData) {
// something
}).fail(function() {
//something
});
}
return dfd.promise();
}
I am getting the following error -
TypeError: promises[i].done is not a function
If you want to execute something when all your promises resolve...
...you should take a look at $q.all()
Enjoy!
This is not the angular way I should say you must use $q service for it.:-
$q.all([Your array]).then(function(values) {
//Your code
});
Service:-
this.fetch = function(index){
var url = some_url;
var def = $q.defer();
$http.get(url,{timeout:8000}).success(function(data) {
def.resolve(data);
})
.error(function() {
def.reject("Failed to get albums");
});
return def.promise;;
};
Controller:-
var promises = [];
var promise1 = geturl.fetch(0);
var promise2 = geturl.fetch(1);
promises.push(promise1);
promises.push(promise2);
$q.all(promises).then(function(results){
});
Hope it help :)
So my readingController calls getRomanization in the main body the first time and it in turn calls the Romanize factory service (shown below controller). This all works fine the fist time but the second time when round when getRomanization is called at the end of checkRomanization the Romanize service comes up as undefined in Chrome. What happens to the Romanize service? why does it only run successfully once?
Please help me with this as I have been stuck for ages.
var readingController = function ($scope, Romanize){
$scope.getRomanization = function(Romanize){
$scope.currentMaterial = $scope.sections[$scope.sectionNumber].tutorials[$scope.tutorialNumber].material[$scope.questionNumber];
Romanize.get($scope.currentMaterial).then(function(d){
$scope.romanized = d;
});
$scope.$apply();
};
$scope.getRomanization(Romanize);
$scope.$apply();
$scope.checkRomanization = function(userRomanization){
if ($scope.romanized === userRomanization){
$scope.questionNumber++;
$scope.getRomanization();
};
}
}
app.factory('Romanize', ['$http', 'Position', function($http, Position){
return{
get: function(query){
var url= Position.sections[Position.sectionNumber].romanizeService + "?korean=" + query;
var promise = $http.get(url).then(function(d) {
var parts = $(d.data).find("span");
var array = [];
for (var x = 0; x<parts.length; x++){
array.push(parts[x].title);
}
var result = array.join("");
return result;
});
return promise;
}
};
}]);
Your second call to getRomanize is missing the service name as an argument
$scope.checkRomanization = function(userRomanization){
if ($scope.romanized === userRomanization){
$scope.questionNumber++;
$scope.getRomanization(Romanize);
};
};