How to get data by service and $cacheFactory by one method - angularjs

I have a factory which get data from server. In the factory method I have used $cacheFactory to cache getting data. My code is as follows..
var buyersService = function ($http, $q,$cacheFactory) {
var serviceBase = '/api/OMData/';
var BuyersFactory = {};
buyersService.cache = $cacheFactory('cacheId');
BuyersFactory.GetBuyers = function () {
var dataList = buyersService.cache.get('BuyerData');
if (dataList != null && dataList.length > 0) {
return dataList;
}
else {
return $http.get(serviceBase + 'GetBuyers').then(
function (results) {
buyersService.cache.put("BuyerData", results.data);
return results.data;
});
}
}
app.factory('OMDataService', ['$http', '$q', '$cacheFactory', buyersService]);
});
Now I have called GetBuyers method from controller. My method is like below..
var BuyerController = function ($scope, BuyersService) {
$scope.Buyers = [];
init();
function init() {
getBuyers();
}
function getBuyers() {
BuyersService.GetBuyers()
.then(function (data) {
$scope.Buyers = data;
}, function (error) {
alert(error.message);
});
}
};
app.register.controller('BuyersController', ['$scope', 'OMDataService', BuyerController]);
When I have executed my controller method second time I have got an error message in promise part.
Object doesn't support property or method 'then'

The issue here is that your function returns two different things: either a promise or plain data. To remedy this, use another promise to control the flow and return that one as the result of the function.
Update your code to
var buyersService = function ($http, $q,$cacheFactory) {
var serviceBase = '/api/OMData/';
var BuyersFactory = {};
buyersService.cache = $cacheFactory('cacheId');
BuyersFactory.GetBuyers = function () {
var buyersDataIsAvailable = $q.defer();
var dataList = buyersService.cache.get('BuyerData');
if (dataList != null && dataList.length > 0) {
buyersDataIsAvailable.resolve(dataList);
}
else {
$http.get(serviceBase + 'GetBuyers').then(
function (results) {
buyersService.cache.put("BuyerData", results.data);
buyersDataIsAvailable.resolve(results.data);
});
}
return buyersDataIsAvailable.promise;
}
app.factory('OMDataService', ['$http', '$q', '$cacheFactory', buyersService]);
});

Related

TypeError: Cannot read property 'then' of undefined at m.$scope.profile

I am trying to call a child service function in Main Controller.
But I am getting error on than in profile function.
This is my profile function inside main controller.
App.controller("globalCtrl", function($scope,$rootScope, $window, $location, $rootScope, $cookieStore, toastr, ClientService,) {
var theClient = $cookieStore.get('UserData') || {};
$scope.profile = function(theClient) {
var getCurrentClient = theClient;
var getOrganizationId = $rootScope.globalSession.OrganizationId;
if($rootScope.globalSession.UserRole == "Admin")
{
if (getOrganizationId) {
ClientService.getClient(getOrganizationId).then(function(aGetClientResponse) {
if(getClientResponse[0] == $scope.RESPONSE_CODE.CM_SUCCESS) {
$scope.myprofile = getClientResponse[1];
$location.path("/profile");
}
else {
toastr.warning($scope.USER_MESSAGE.SERVICE_NOT_AVAILABLE, '');
}
});
}
}
};
)};
This is Service of another controller whom function "getClient" I am calling in profile function.
App.factory('ClientService', function($http, $cookieStore, uuid2, API_URL, REQUEST_HEADER, RESPONSE_CODE) {
var theClient = $cookieStore.get('UserData') || {};
return {
getClient: function() {
if(theClient.OrganizationId) {
//API Call
var promise = $http.get(API_URL.GET_CLIENT+theClient.OrganizationId+"&CorrelationId="+uuid2.newuuid()+"&ContextOrganizationId=009", REQUEST_HEADER).then(
function(aGetClientResponse) { //Success Callback
return [aGetClientResponse.data.GetClientResponse.Result.ResponseCode, aGetClientResponse.data.GetClientResponse];
},
function(aGetClientResponse) { //Error Callback
return [aGetClientResponse.status,''];
});
}
return promise;
},
setClient: function(aClient) {
theClient = aClient;
$cookieStore.put('UserData', theClient);
}
}
});
Need Help. cant figure out the Problem. Thanks in advance!
Change your service to just return a promise and handle that promise in your controller using then
The service directly returns API call, no then in service
var promise = $http.get(API_URL.GET_CLIENT+theClient.OrganizationId+"&CorrelationId="+uuid2.newuuid()+"&ContextOrganizationId=009", REQUEST_HEADER)
Here is your service:
App.factory('ClientService', function($http, $cookieStore, uuid2, API_URL, REQUEST_HEADER, RESPONSE_CODE, $q) {
var theClient = $cookieStore.get('UserData') || {};
return {
getClient: function() {
if(theClient.OrganizationId) {
var promise = $http.get(API_URL.GET_CLIENT+theClient.OrganizationId+"&CorrelationId="+uuid2.newuuid()+"&ContextOrganizationId=009", REQUEST_HEADER)
}
else {
var promise = $q.reject();
}
return promise;
},
setClient: function(aClient) {
theClient = aClient;
$cookieStore.put('UserData', theClient);
}
}
});
Now, the controller handles the success and failure response using then
ClientService.getClient(getOrganizationId).then(function(){},function(){})
Here is your controller, observe then
App.controller("globalCtrl", function($scope,$rootScope, $window, $location, $cookieStore, toastr, ClientService) {
var theClient = $cookieStore.get('UserData') || {};
$scope.profile = function(theClient) {
var getCurrentClient = theClient;
var getOrganizationId = $rootScope.globalSession.OrganizationId;
if($rootScope.globalSession.UserRole == "Admin")
{
if (getOrganizationId) {
ClientService.getClient(getOrganizationId).then(function(aGetClientResponse) {
var response = [aGetClientResponse.data.GetClientResponse.Result.ResponseCode, aGetClientResponse.data.GetClientResponse];
if(response[0] == $scope.RESPONSE_CODE.CM_SUCCESS) {
$scope.myprofile = response[1];
$location.path("/profile");
}
else {
toastr.warning($scope.USER_MESSAGE.SERVICE_NOT_AVAILABLE, '');
}
},
function(aGetClientResponse) { //Error Callback
return [aGetClientResponse.status,''];
});
}
}
};
)};
In getClient() the code looks like this:
if(theClient.OrganizationId) {
//API Call
var promise = ... some stuff ...;
}
return promise;
So if the condition is false you return undefined which doesn't have a .then property.
You should make sure that a function which returns a promise always returns a promise. If you want to signal that a missing id is an error then just return $q.reject(something) for an already rejected promise.
I'm not sure it this works, but instead of returning a object with the functions inside, have you tried to declare them as part of the factory object? I have some declared like this and they are working, so have a try:
App.factory('ClientService', function($http, $cookieStore, uuid2, API_URL, REQUEST_HEADER, RESPONSE_CODE) {
var theClient = $cookieStore.get('UserData') || {};
var function = {
getClient: function() {
if(theClient.OrganizationId) {
//API Call
var promise = $http.get(API_URL.GET_CLIENT+theClient.OrganizationId+"&CorrelationId="+uuid2.newuuid()+"&ContextOrganizationId=009", REQUEST_HEADER).then(
function(aGetClientResponse) { //Success Callback
return [aGetClientResponse.data.GetClientResponse.Result.ResponseCode, aGetClientResponse.data.GetClientResponse];
},
function(aGetClientResponse) { //Error Callback
return [aGetClientResponse.status,''];
});
}
return promise;
},
setClient: function(aClient) {
theClient = aClient;
$cookieStore.put('UserData', theClient);
}
}
return function;
});
You can have a try with this too:
Define the services in the controller declaration (and remove one rootScope, its duplicated):
App.controller("globalCtrl", ['$scope','$rootScope','$window','$location','$cookieStore','toastr','ClientService', function($scope,$rootScope, $window, $location, $cookieStore, toastr, ClientService){
[...]
}]);
Try something like this to ensure that there is always a promise object available.
getClient: function() {
var deferred = $q.defer();
if(theClient.OrganizationId) {
//API Call
$http.get(API_URL.GET_CLIENT+theClient.OrganizationId+"&CorrelationId="+uuid2.newuuid()+"&ContextOrganizationId=009", REQUEST_HEADER).then(
function(aGetClientResponse) { //Success Callback
deferred.resolve(aGetClientResponse);
},
function(aGetClientResponse) { //Error Callback
deferred.resolve(aGetClientResponse);
});
}else{
deferred.reject('Missing OrganizationId');
}
return deferred.promise;
}
In the else part you can return dummy promise with either resolve($q.resolve()) or reject($q.reject()) status.
JS :
getClient: function() {
if(theClient.OrganizationId) {
//API Call
var promise = $http.get(API_URL.GET_CLIENT+theClient.OrganizationId+"&CorrelationId="+uuid2.newuuid()+"&ContextOrganizationId=009", REQUEST_HEADER).then(
///your rest code
return promise;
}else{
return $q.reject();
}
}
With $q.reject() it will call error handler in profile call.So,add error handler callback as second parameter
ClientService.getClient(getOrganizationId).then(function(aGetClientResponse) {
//success code
},
function(){ //add it in your script
//check error here
});

Angular Controller Not Waiting for Service Promise to Resolve

I have an Angular service that looks like this:
(function () {
'use strict';
var serviceId = 'currentUserService';
angular.module('app').factory(serviceId, ['common', 'datacontext', currentUserService]);
function currentUserService(common, datacontext) {
var $q = common.$q;
var getLogFn = common.logger.getLogFn;
var logError = getLogFn(serviceId, "error");
var user = {};
var service = {
user: user,
doesUserHaveFeature: doesUserHaveFeature
};
activate();
return service;
function activate() {
var promises = [getCurrentUser()];
$q.all(promises);
}
function getCurrentUser() {
var deferred = $q.defer();
datacontext.getLoginInformation().then(function (data) {
user = data;
deferred.resolve(data);
});
return deferred.promise;
}
function doesUserHaveFeature(featureName) {
debugger;
var feature = featureName.toLowerCase();
var result = _.filter(user.features, function(item) {
var featureString = item.toLowerCase();
return feature == featureString;
});
if (result) {
return true;
}
return false;
}
}
})();
The service is injected into my Controller and my controller calls the doesUserHaveFeature() method.
However, the doesUserHaveFeature method is called before the promise in the activate method is resolved. Therefore, the user variable is still an empty object.
How can I ensure that the promise in the activate method is returned before the doesUserHaveFeature method is called?
Thanks!
Jeremy
As the user data is retrieved asynchronously, your factory methods are going to have to return promises. Here's how I'd do it...
.factory('currentUserService', function(datacontext) {
var userPromise = datacontext.getLoginInformation();
return {
user: userPromise,
doesUserHaveFeature: function(featureName) {
return userPromise.then(function(user) {
return _.some(user.features, function(feature) {
return feature.toLowerCase() === featureName.toLowerCase();
});
});
}
};
});

Angularjs async requests

Controller 1
var promise = UserService.userexists(groupid);
promise.then(
},
function (response) {
}
);
Controller 2
var promise = UserService.userexists(groupid);
promise.then(
},
function (response) {
}
);
Service
app.factory("UserService", function ($q, $timeout) {
return {
userexists: function (groupid) {
var deferred = $q.defer();
//this is just to keep a pointer to parent scope from within promise scope.
IsCurrentUserMemberOfGroup(groupid, function (isCurrentUser) {
if (isCurrentUser) {
deferred.resolve(isCurrentUser);
}
else {
deferred.reject(isCurrentUser);
}
});
return deferred.promise;
}
}
});
function IsCurrentUserMemberOfGroup(groupId, OnComplete) {
var currentContext = new SP.ClientContext.get_current();
var currentWeb = currentContext.get_web();
var currentUser = currentContext.get_web().get_currentUser();
currentContext.load(currentUser);
var allGroups = currentWeb.get_siteGroups();
currentContext.load(allGroups);
var group = allGroups.getById(groupId);
currentContext.load(group);
var groupUsers = group.get_users();
currentContext.load(groupUsers);
currentContext.executeQueryAsync(OnSuccess, OnFailure);
function OnSuccess(sender, args) {
var userInGroup = false;
var groupUserEnumerator = groupUsers.getEnumerator();
while (groupUserEnumerator.moveNext()) {
var groupUser = groupUserEnumerator.get_current();
if (groupUser.get_id() == currentUser.get_id()) {
userInGroup = true;
break;
}
}
OnComplete(userInGroup);
}
function OnFailure(sender, args) {
OnComplete(false);
}
}
I have controller 1 and controller 2 on the same page, both use the same service to check the user exist in a specific group. Problem is the service runs the check user method (IsCurrentUserMemberOfGroup) for each controller. Is there a way so that I execute the method once and other controllers can use it?
This is a sharepoint 2010 environment.
Thanks
You could cache the result in your service, maybe something like
app.factory("UserService", function ($q, $timeout) {
return {
var cache = {};
userexists: function (groupid) {
var deferred = $q.defer();
if (cache[groupif]) {
deferred.resolve(cache[groupif]);
return deferred.promise;
}
IsCurrentUserMemberOfGroup(groupid, function (isCurrentUser) {
if (isCurrentUser) {
cache[groupif] = isCurrentUser;
deferred.resolve(isCurrentUser);
}
else {
deferred.reject(isCurrentUser);
}
});
return deferred.promise;
}
}
});

AngularJS $q.all how to resolve data in service and not in controller

I've refactored my code so that all model creation is off the controller and inside my factory. This works great but now I want to make sure that on init that all my promises are resolved in order and so attempting to use $q.all returns an array of undefined items. What am I doing wrong? Here is my code:
//Data 1
{'name': 'a name'}
//Data 2
{'city': 'a city'}
//Data 3
{'car' : 'a car'}
var app = angular.module('app', []);
app.service('myHttpService', ['$http', '$q', function($http, $q){
var DEFAULT_ERROR = "An error occurred while contacting the server.";
return {
myPromise : function(httpAction){
var deferred = $q.defer();
httpAction.success(function(data){
deferred.resolve(data);
}).error(function(reason){
if(reason) {
if(typeof reason === 'object' && reason.err)
deferred.reject(reason.err);
else if(typeof reason === 'string')
deferred.reject(reason);
else
deferred.reject(DEFAULT_ERROR);
}
else
deferred.reject(DEFAULT_ERROR);
});
return deferred.promise;
}
}
}]);
app.factory('myService', function($http, $q, myHttpService) {
return MyData = {
getData1: getData1,
getData2: getData2,
getData3: getData3,
getAllData: getAllData
};
function getData1() {
return myHttpService.apiPromise($http.get('/api/data_1')).then(function(data1){
MyData.data1 = data1;
});
}
function getData2() {
return myHttpService.apiPromise($http.get('/api/data_2')).then(function(data2) {
MyData.data2 = data2;
});
}
function getData3(){
return myHttpService.apiPromise($http.get('/api/data_3')).then(function(data3) {
MyData.data3 = data3
});
}
function getAllData(promises) {
return $q.all(promises).then(function(data) {
MyData.allData = data;
})
}
});
app.controller('MyCtrl', function (myService) {
var this = self;
this.data1 = myService.getData1;
this.data2 = myService.getData2;
this.data3 = myService.getData3;
this.allData = myService.getAllData;
this.init = function() {
//HOW DO I GET THIS
myService.getData1().then() {
self.data1 = myService.data1;
myService.getData2().then() {
self.data2 = myService.data2;
myService.getData3().then {
self.data3 = myService.data3;
}
}
}
// INTO THIS??
myService.getAllData([myService.getData1(), myService.getData2(), myService.getData3()]).then(function() {
self.allData = myService.getAllData;
console.log(self.allData);
//EXPECT [{'name': 'my name'},{'city': 'my city'},{'car' : 'my car'}]
//INSTEAD GET
//[undefined, undefined, undefined]
})
}
});
In your case myService.getDataN() is not a promise. Every getDataN should also return data inside then.
...
function getData1() {
return myHttpService.apiPromise($http.get('/api/data_1')).then(function(data1){
MyData.data1 = data1;
return data1;
});
}
...

multiple method call same single service with cachefactory in angularjs

I have a service like below... which always get all types of buyers from server.
var buyersService = function ($http, $q,$cacheFactory) {
var serviceBase = '/api/OMData/';
var BuyersFactory = {};
buyersService.cache = $cacheFactory('cacheId');
BuyersFactory.GetBuyers = function (type) {
var buyersDiffer = $q.defer();
var dataList = buyersService.cache.get('BuyerData');
if (dataList != null && dataList.length > 0) {
buyersDiffer .resolve(_getBuyerByType(type,dataList));
}
else {
$http.get(serviceBase + 'GetBuyers').then(
function (results) {
buyersService.cache.put("BuyerData", results.data);
buyersDiffer .resolve(_getBuyerByType(type,results.data));
});
}
return buyersDiffer .promise;
}
app.factory('OMDataService', ['$http', '$q', '$cacheFactory', buyersService]);
});
function _getBuyerByType(Type,dataList) {
try {
var typedBuyer= Enumerable.From(dataList).Where(function (x) {
return x.Type== Type;
}).ToArray();
return typedBuyer;
} catch (e) {
throw e;
}
}
function getLocalBuyer(){
return BuyersFactory.GetBuyers(1);
}
function getForeignBuyer(){
return BuyersFactory.GetBuyers(2);
}
There are two types of buyer in my business. Such as localBuyer and foreignBuyer. In my controller I need to call two service at a time with Q.All. When two service hit in buyersService method then system call server two times. Hence current cash is empty. But I want that system call server one times for one service call and second service get data from cache.
EDIT: Controller code
function loadDefaultData() {
try {
$q.all([
OMDataService.getLocalBuyer(),
OMDataService.getForeignBuyer(),
]).then(function (data) {
$timeout(function () {
//set dropdown list
viewData.local= data[0];
viewData.foreign= data[1];
}, 0);
}).catch(function (e) {
showError(e);
});
} catch (e) {
showError(e);
}
}
I would suggest defining a variable to save the promise returned by $http. The first time the service is called, that variable is initially undefined. It is set to the promise returned by $http.
The logic of your service thus becomes:
if cache, return cache
if promise, return promise
else call server and save promise
I removed you deferred variable. It is no more needed. I did wrap the cache response in $q.when() (doc: https://docs.angularjs.org/api/ng/service/$q)
var buyersService = function ($http, $q, $cacheFactory) {
var serviceBase = '/api/OMData/';
var BuyersFactory = {};
buyersService.cache = $cacheFactory('cacheId');
var serverPromise; // Will be used to store the promise returned by $http on first server call
BuyersFactory.GetBuyers = function (type) {
var dataList = buyersService.cache.get('BuyerData');
function serverCall () { // stores promise receives by $http and return it
serverPromise = $http.get(serviceBase + 'GetBuyers').then(
function (results) {
buyersService.cache.put("BuyerData", results.data);
return _getBuyerByType(type, results.data);
});
return serverPromise;
}
if (dataList !== null && dataList.length > 0) {
return $q.when(_getBuyerByType(type,dataList)); // auto resolving promise
}
// If a first call to the server was already done, serverPromise will exist and no further call to the server will be made
return serverPromise || serverCall();
};
app.factory('OMDataService', ['$http', '$q', '$cacheFactory', buyersService]);
});
function _getBuyerByType(Type,dataList) {
try {
var typedBuyer= Enumerable.From(dataList).Where(function (x) {
return x.Type== Type;
}).ToArray();
return typedBuyer;
} catch (e) {
throw e;
}
}

Resources