Using Angularjs here:
I have a form where user fills up some data and clicks save button to save data :
$scope.save = function (isValid) {
if (isValid) {
if (!$scope.checkBoxChecked) {
$scope.getExistingName($scope.uName);
}
var name = $scope.uName != '' ? $scope.uName? : 'testuser';
//Call save api
}
else {
return false;
}
};
In the save method I am checking for uname, which gets it value by calling another api as below:
$scope.getExistingName = function (uName) {
myService.getDataFromApi(uName).then(function (data) {
var existingSetName = '';
if(data.length >0)
{
$scope.uName = data[i].uName;
}
});
}
The issue is $scope.uName in my Save button is always ''. I tried to debug and found out that the result from the $scope.getExistingName method
being is promise is deffered and returned after the orignal call. Because of which my $scope.uName is empty.
What am I missing here?
--Updated---
Save method:
var name = $scope.getExistingName($scope.uName);
Updated getExistingName
$scope.getExistingName = function (uName) {
return myService.getDataFromApi(uName).then(function (data) {
var existingSetName = '';
if(data.length >0)
{
return data[i].uName;
}
});
}
--This works--
if (!$scope.checkBoxChecked) {
$scope.getExistingName($scope.uName).then(function(data)
{
var name = $scope.uName != '' ? $scope.uName? : 'testuser';
//Call save api
});
}
else
{
var name = $scope.uName != '' ? $scope.uName? : 'testuser';
//Call save api
}
Related
This is my service
var validateEmailService=function (validateEmailUrl,validateEmailParameters,email) {
var url=validateEmailUrl +'?';
angular.forEach(validateEmailParameters,function (value,key) {
url=url +key +'='+ value.parameter +'&';
});
url=url+'email='+email;
$http.get(url).then(function (value) {
var result = value;
var smtpCheck = result.data.smtp_check;
var mxRecordsCheck = result.data.mx_found;
// console.log(smtpCheck ,mxRecordsCheck);
if (smtpCheck === true && mxRecordsCheck === true){
//console.log('In');
return true;
}
//console.log('Out');
});
};
var sendEmailService=function (sendEmailApiUrl,emailData,config,email,firstName,lastName) {
emailData = JSON.stringify(emailData);
emailData = emailData.replace("%%Email%%", email);
emailData = emailData.replace("%%FirstName%%", firstName);
emailData = emailData.replace("%%LastName%%", lastName);
emailData = JSON.parse(emailData);
$http.post(sendEmailApiUrl, emailData, config);
};
return {
validateEmailService: validateEmailService,
sendEmailService: sendEmailService
};
And I have called these functions here in the controller
var validate = emailService.validateEmailService(validateEmailUrl, validateEmailParameters,$scope.patient.Email);
if (validate === true) {
emailService.sendEmailService(sendEmailApiUrl, emailData, config,$scope.patient.Email,$scope.patient.givenName,$scope.patient.familyName);
messagingService.showMessage("info", "REGISTRATION_LABEL_SAVED");
$state.go("patient.edit", {
patientUuid: $scope.patient.uuid
});
}
else {
alert('Email does not exist');
}
So when the if statement is executed validate does not contain anything and it automatically goes to the else part even when validate should be true.
You should use the promise instead, the $http.get is asynchronous
var validateEmailService=function (validateEmailUrl,validateEmailParameters,email) {
var url=validateEmailUrl +'?';
angular.forEach(validateEmailParameters,function (value,key) {
url=url +key +'='+ value.parameter +'&';
});
url=url+'email='+email;
// IMPORTANT PART: USE RETURN
return $http.get(url).then(function (value) {
var result = value;
var smtpCheck = result.data.smtp_check;
var mxRecordsCheck = result.data.mx_found;
// console.log(smtpCheck ,mxRecordsCheck);
if (smtpCheck === true && mxRecordsCheck === true){
//console.log('In');
return true;
}
//console.log('Out');
});
};
And then in your controller:
emailService.validateEmailService(validateEmailUrl, validateEmailParameters,$scope.patient.Email).then(function(validate){
if (validate === true) {
emailService.sendEmailService(sendEmailApiUrl, emailData, config,$scope.patient.Email,$scope.patient.givenName,$scope.patient.familyName);
messagingService.showMessage("info", "REGISTRATION_LABEL_SAVED");
$state.go("patient.edit", {
patientUuid: $scope.patient.uuid
});
} else {
alert('Email does not exist');
}
})
Also, see this link about promises
We are using jHipster. I am new to this.
When trying to access another method hasPermission, it is always returning false before and hence we are unable to disable the menu. In authority, we are passing values like 'Company' and this checks internally with a userPermission Object to see if the user has 'Read' access. The user does have the access, but the code always returns false and hence the menu is always disabled. Am I making something wrong here ? Here is the complete code
(function() {
'use strict';
angular
.module('icmApp')
.factory('Principal', Principal);
Principal.$inject = ['$q', 'Account'];
function Principal ($q, Account) {
var _identity,
_authenticated = false;
var _authenticated = false;
var service = {
authenticate: authenticate,
hasAnyAuthority: hasAnyAuthority,
hasAuthority: hasAuthority,
identity: identity,
isAuthenticated: isAuthenticated,
isIdentityResolved: isIdentityResolved,
hasPermission: hasPermission
};
return service;
function authenticate (identity) {
_identity = identity;
_authenticated = identity !== null;
}
function hasAnyAuthority (authorities) {
if (!_authenticated || !_identity || !_identity.authorities) {
return false;
}
for (var i = 0; i < authorities.length; i++) {
if (_identity.authorities.indexOf(authorities[i]) !== -1) {
return true;
}
}
return false;
}
function hasAuthority (authority) {
if (!_authenticated) {
return $q.when(false);
}
var bPerm= hasPermission(authority);
if(bPerm==true)
{
alert("Permission is available");
return true;
}else
{
alert("Permission is NOT available");
return false;
}
/*return then(function(_id) {
return _id.authorities && _id.authorities.indexOf(authority) !== -1;
},function(){
return false;
});*/
}
function identity (force) {
var deferred = $q.defer();
if (force === true) {
_identity = undefined;
}
// check and see if we have retrieved the identity data from the server.
// if we have, reuse it by immediately resolving
if (angular.isDefined(_identity)) {
deferred.resolve(_identity);
return deferred.promise;
}
// retrieve the identity data from the server, update the identity object, and then resolve.
Account.get().$promise
.then(getAccountThen)
.catch(getAccountCatch);
return deferred.promise;
function getAccountThen (account) {
_identity = account.data;
_authenticated = true;
deferred.resolve(_identity);
}
function getAccountCatch () {
_identity = null;
_authenticated = false;
deferred.resolve(_identity);
}
}
function isAuthenticated () {
return _authenticated;
}
function isIdentityResolved () {
return angular.isDefined(_identity);
}
function hasPermission(authority){
var userPermission;
var bPermission=false;
//alert("Calling has Permission");
Account.getAllPermissions(function onSuccess(data) {
userPermission=data;
if(userPermission){
//alert("User Permission is "+ userPermission);
for(var i=0; i< userPermission.length; i++)
{
if((userPermission[i].object_name==authority)&& ((userPermission[i].read_access==true) || (userPermission[i].create_access==true)) )
{
bPermission= true;
break;
}
}
}
});
return bPermission;
}
}
})();
I'm making an ionic application. I have a function called scope.win() that's supposed to fire when a quiz is finished, and then update the JSON file to add that quiz to the number of finished quizzes but it doesn't run properly.It doesn't give off any error. The function just stops running at a certain point and the app keeps going and nothing is happening.
This is the controller's file
angular.module('controllers', ['services'])
.controller('MainCtrl', function ($scope, $state, data) {
$scope.$on('$ionicView.enter', function () {
data.create();
});
$scope.chapter = data.chapterProgress();
})
.controller("BtnClick", function ($scope, lives, data, $cordovaFile, $ionicScrollDelegate) {
var live = 3;
var clickedOn = [];
var numQuestions;
$scope.part2Cred = false;
$scope.part3Cred = false;
$scope.part4Cred = false;
$scope.part5Cred = false;
$scope.part6Cred = false;
$scope.part7Cred = false;
$scope.part8Cred = false;
$scope.part9Cred = false;
$scope.part10Cred = false;
$scope.partQCred = false;
$scope.setNumQuestions = function(num){
numQuestions = num;
}
$scope.updatelives = function (){
//grabs the element that is called liv then updates it
var livesOnPage = document.getElementById('liv');
livesOnPage.innerHTML = live;
}
$scope.wrong = function (event){
var selec = document.getElementById(event.target.id);
if(clickedOn.includes(selec)){}
else{
selec.style.color = "grey";
clickedOn.push(selec);
live = live - 1;
if(live == 0){
$scope.gameover();
}
else{
$scope.updatelives();
}
}
}
$scope.right = function (event,chapter, section){
var selec = document.getElementById(event.target.id);
if(clickedOn.includes(selec)){}
else{
selec.style.color = "green";
clickedOn.push(selec);
numQuestions = numQuestions - 1;
if(numQuestions === 0){
$scope.win(chapter, section);
}
}
}
$scope.gameover = function(){
alert("game over please try again");
live = 3;
$ionicScrollDelegate.scrollTop();
$scope.partQCred = false;
$scope.part1Cred = !$scope.part1Cred;
for(i = 0; i< clickedOn.length;i++){
clickedOn[i].style.color = "rgb(68,68,68)";
}
}
$scope.win = function (chapter, section) {
alert("Well Done");
var data = data.chapterProgress(); // It is at this point that the //function stops running without giving off any error.
alert("Good Job");
var sectionsComplete = data[chapter].sectionsCompleted;
var totalsection = data[chapter].totalSections;
if (section === totalSection) {
window.location.href = "#/chapter1sections";
return;
}
if (section > sectionsComplete) {
data[chapter].sectionsCompleted += 1;
var url = "";
if (ionic.Platform.isAndroid()) {
url = "/android_asset/www/";
}
document.addEventListener('deviceready', function () {
$cordovaFile.writeFile(url + "js/", "chapters.json", data, true)
.then(function (success) {
// success
alert("Json file updated")
window.location.href = "#/chapter1sections";
}, function (error) {
// error
});
});
}
}
});
Here is the Services file. It seems to run fine but it is referenced a lot in the problematic sections of code in the controllers so I figured it was necessary to put it here.
angular.module('services', [])
.service('lives', function () {
var live = 3;
return {
getlives: function () {
return live;
},
setlives: function (value) {
live = value;
}
};
})
.service('data', function ($cordovaFile, $http) {
var url = "";
if (ionic.Platform.isAndroid()) {
url = "/android_asset/www/";
}
return {
//Run this function on startup to check if the chapters.json file exists, if not, then it will be created
create: function () {
var init = {
"one": {
"sectionsCompleted": 0,
"totalSections": 4
},
"two": {
"sectionsCompleted": 0,
"totalSections": 1
}
};
$cordovaFile.writeFile(url + "js/", "chapters.json", init, false)
.then(function (success) {
// success
}, function (error) {
// error
});
},
chapterProgress: function () {
return $http.get(url + "js/chapters.json").success(function (response) {
var json = JSON.parse(response);
return json;
}, function (error) {
alert(error);
});
}
}
});
Thank You so much for the help and time.
I have a scenario in which there is 8 web api's called as :
#1
Sync Local DB from server DB (response will RETURN a List=> myList)
If (myList.Length > 0)
#1.1 Call web Api to Insert/Update Local DB
#2
Sync Server DB from Local DB (Request goes with a List=> myList)
If (myList.Length > 0)
#2.1 Call web Api to Insert/Update in Server DB (Response will RETURN a List=> newList)
If(newList.length > 0)
#2.2 Call web Api to Insert/Update in Local DB
I have two separate process For Head and Head Collection tables which synced with above process. So there is #3 and #4 scenario is also present.
I have call web api in the following manner...
syncHeadDataLogic();
syncHeadCollectionDataLogic();
I need that Head data should be synced first then HeadCollection data synced. But if there is no updated record for head then Head collection executed.
In my scenario my web apis called in any order but i need a order as I have described above. Kindly suggest me how I achieved this.
#Updated
//Sync Head
$scope.initializeController = function () {
if ($scope.online) {
//debugger;
syncHeadDataLogic();
syncHeadCollectionDataLogic();
}
};
function syncHeadDataLogic() {
HeadService.HeadSyncLocalDB(parseInt(localStorage.headRevision, 10), $scope.completeds, $scope.erroe);
};
$scope.SynServerDBCompleted = function (response) {
debugger;
$scope.HeadListForSync = response.HeadList;
var tempHeadCurrencyDetail = [];
if ($scope.HeadListForSync.length > 0) {
angular.forEach($scope.HeadListForSync, function (xx) {
xx.CurrencyId = xx.CurrencyServerId;
xx.Id = xx.HeadServerId;
angular.forEach(xx.HeadCurrencyDetail, function (yy) {
yy.CurrencyId = yy.CurrencyServerId;
yy.HeadId = xx.HeadServerId;
if (yy.Revision == -1)
tempHeadCurrencyDetail.push(yy);
});
xx.HeadCurrencyDetail = tempHeadCurrencyDetail;
});
var postData = { Revision: parseInt(localStorage.headRevision, 10), HeadList: $scope.HeadListForSync };
HeadService.SynServerDB(postData, $scope.completed, $scope.erroe);
}
else {
// alertsService.RenderSuccessMessage("There is no change in data after your last synchronization.");
}
};
$scope.requestErrorwer = function (response) {
debugger;
};
$scope.completed = function (response) {
debugger;
if (response.RevisionNo == localStorage.headRevision) {
syncHeadCollectionDataLogic();
// alertsService.RenderErrorMessage("There is newer version on the server. Please Sync from server first.", "MessageAlert");
}
else {
syncData(response);
}
};
$scope.completeds = function (response) {
debugger;
if (response.RevisionNo == localStorage.headRevision) {
syncHeadCollectionDataLogic();
// alertsService.RenderSuccessMessage("You are already working on the latest version", "MessageAlert");
}
else {
syncData(response);
}
//
var request = new Object();
HeadService.getAllHeadForRevision(request, $scope.SynServerDBCompleted, $scope.requestErrorwer);
};
$scope.erroe = function (response) {
debugger;
// alertsService.RenderErrorMessage("Data Synchronization Failed", "MessageAlert");
};
function syncData(data) {
debugger;
$scope.ReturnedRevisonNo = data.RevisionNo;
if (data.HeadList && data.HeadList.length > 0) {
var postData = { Revision: $scope.ReturnedRevisonNo, HeadList: data.HeadList, HeadRevision: $scope.ReturnedRevisonNo };
HeadService.AddUpdateHeadAfterSync(postData, $scope.cmpSync, $scope.Error);
}
else {
syncHeadCollectionDataLogic();
}
};
$scope.cmpSync = function (response) {
debugger;
localStorage.headRevision = $scope.ReturnedRevisonNo;;
alertsService.RenderSuccessMessage("The synchronization has been completed successfully.");
syncHeadCollectionDataLogic();
};
$scope.Error = function (response) {
debugger;
// alertsService.RenderErrorMessage(response.ReturnMessage);
// alertsService.SetValidationErrors($scope, response.ValidationErrors);
};
////////////Sync End
//Sync Head Collection
function syncHeadCollectionDataLogic() {
HeadService.HeadSyncLocalCollectionDB(parseInt(localStorage.headCollectionRevision, 10), $scope.completedCollections, $scope.erroeCollection);
};
$scope.SynServerDBCompletedCollection = function (response) {
$scope.HeadCollectionListForSync = response.HeadCollectionList;
if ($scope.HeadCollectionListForSync.length > 0) {
angular.forEach($scope.HeadCollectionListForSync, function (value, index) {
value.Id = value.HeadCollectionServerId;
angular.forEach(value.HeadCollectionDetails, function (v) {
v.CommittedCurrencyId = v.CommittedCurrencyServerId;
v.HeadId = v.HeadServerId;
v.WeightId = v.WeightServerId;
v.HeadCollectionId = value.HeadCollectionServerId; //change
angular.forEach(v.HeadCollectionAmountDetails, function (xx) {
xx.CurrencyId = xx.CurrencyServerId;
});
});
});
var postData = { Revision: parseInt(localStorage.headCollectionRevision, 10), HeadCollectionList: $scope.HeadCollectionListForSync };
HeadService.SynServerCollectionDB(postData, $scope.completedCollection, $scope.erroeCollection);
}
else {
// alertsService.RenderSuccessMessage("There is no change in data after your last synchronization.");
}
};
$scope.requestErrorwerCollection = function (response) {
};
$scope.completedCollection = function (response) {
if (response.RevisionNo == localStorage.headCollectionRevision) {
// alertsService.RenderErrorMessage("There is newer version on the server. Please Sync from server first.", "MessageAlert");
}
else {
syncDataCollection(response);
}
};
$scope.completedCollections = function (response) {
if (response.RevisionNo == localStorage.headCollectionRevision) {
// alertsService.RenderSuccessMessage("You are already working on the latest version", "MessageAlert");
}
else {
syncDataCollection(response);
}
var request = new Object();
HeadService.getAllHeadCollectionForRevision(request, $scope.SynServerDBCompletedCollection, $scope.requestErrorwerCollection);
};
$scope.erroeCollection = function (response) {
// alertsService.RenderErrorMessage("Data Synchronization Failed", "MessageAlert");
};
function syncDataCollection(data) {
$scope.ReturnedRevisonNo = data.RevisionNo;
if (data.HeadCollectionList && data.HeadCollectionList.length > 0) {
var postData = { Revision: $scope.ReturnedRevisonNo, HeadCollectionList: data.HeadCollectionList, HeadRevision: $scope.ReturnedRevisonNo };
HeadService.AddUpdateaHeadCollectionAfterSync(postData, $scope.cmpSyncCollection, $scope.ErrorCollection);
}
};
$scope.cmpSyncCollection = function (response) {
localStorage.headCollectionRevision = $scope.ReturnedRevisonNo;;
alertsService.RenderSuccessMessage("The synchronization has been completed successfully.");
$scope.initializeController();
};
$scope.ErrorCollection = function (response) {
// alertsService.RenderErrorMessage(response.ReturnMessage);
// alertsService.SetValidationErrors($scope, response.ValidationErrors);
}
//End
I need that Head data should be synced first then HeadCollection data synced. But if there is no updated record for head then Head collection executed.
What you need is chained promises. Try this (I'm giving you pseudocode for now):
HeadService.HeadData
|-----------------|
HeadCollection(headDataResult)
|------------------|
finalHandler(headCollectionResult)
|------------------|
HeadService.HeadData()
.then(HeadService.HeadCollection) // return or throw Err if headDataResult is empty
.then(finalHandler);
Here, the order of execution of the promises will be predictable, and sequential. Also, each promise will be returned the resolved value of the previous promise
AngularJS as you can see in the documentation here, uses Promises out of the box with the $http injectable. You can define a factory like so:
// Factory code
.factory("SampleFactory", function SampleFactory($http) {
var sampleFactoryObject = {};
sampleFactoryObject.getSomething = function() {
return $http.get('/someUrl');
}
sampleFactoryObject.getSomething.then(function resolveHandler(res) {
return res;
},
function rejectHandler(err) {
throw new Error(err);
});
sampleFactoryObject.getSomethingElse = function() {
return $http.get('/someOtherUrl');
}
sampleFactoryObject.getSomethingElse.then(function resolveHandler(res) {
return res;
},
function rejectHandler(err) {
throw new Error(err);
});
return sampleFactoryObject;
});
// Controller code
.controller('myController', function myController(SampleFactory) {
SampleFactory.getSomething()
.then(SampleFactory.getSomethingElse())
.then(finalHandler);
var finalHandler = function(resultOfGetSomethingElse) {
console.log(resultOfGetSomethingElse);
}
});
How to rewrite this code, to get the desired o/p.
I would like to use the AgentReply object after filling in the data.
Inside the switch case, this object has data. But once outside, it is null again. Understood that it is because of the async,
But what should I do, to be able to use 'AgentReply' once it has data.
$scope.ActionItems = function (actionItem) {
var AgentReply = {};
switch (actionItem) {
case "SendOTP":
var SentStatus = "";
DataFactory.SendOTP('39487539847')
.then(function (response) {
SentStatus = JSON.parse(JSON.parse(response.data));
SendOTPFailed();
}, function (error) {
});
break;
}/*End of switch*/
function SendOTPFailed(){
if (SentStatus == "200") {
AgentReply = {
IsCustomer: false,
UserText: "Request Failed.",
}
}
}
if (Object.keys(AgentReply).length > 0) {
//do something with AgentReply
}
}
Just pass a function in to where the AgentReply is available, and define it underneath, ie:
$scope.ActionItems = function (actionItem) {
var AgentReply = {};
switch (actionItem) {
case "SendOTP":
var SentStatus = "";
DataFactory.SendOTP('39487539847')
.then(function (response) {
SentStatus = JSON.parse(JSON.parse(response.data));
if (SentStatus == "200") {
AgentReply = {
IsCustomer: false,
UserText: "Request Failed.",
}
}
doSomethingWithAgentReply(AgentReply);
}, function (error) {
});
break;
}
console.log(AgentReply); //null here
function doSomethingWithAgentReply(reply) {
if (Object.keys(reply).length > 0) {
//do something with AgentReply
}
}
}
If you need to use this code :
if (Object.keys(AgentReply).length > 0) {
//do something with AgentReply
}
}
Outside the .then() function :
DataFactory.SendOTP('39487539847')
.then(function (response) {
})
You can try this:
$scope.ActionItems = function (actionItem) {
var def = jQuery.Deferred();
var AgentReply = {};
switch (actionItem) {
case "SendOTP":
var SentStatus = "";
DataFactory.SendOTP('39487539847')
.then(function (response) {
SentStatus = JSON.parse(JSON.parse(response.data));
if (SentStatus == "200") {
AgentReply = {
IsCustomer: false,
UserText: "Request Failed.",
}
def.resolve(AgentReply);
}
console.log(AgentReply); //available here
}, function (error) {
def.reject(error);
});
return def.promise();
break;
}
//console.log(AgentReply); //null here
//if (Object.keys(AgentReply).length > 0) {
//do something with AgentReply
// }
//}
// This is unusable in this case.
The usage is:
var someActionItem = 'SomeActionItemInfo';
$scope.ActionItems(someActionItem)
.then(function(agentReply) {
if (Object.keys(agentReply).length > 0) {
//do something with agentReply
}
}, function(error));
EDIT:
$scope.ActionItems is the same function. What happening when you using promise?
First you defining the deffer object. var def = jQuery.Deferred(). This object is at jQuery, but all frameworks/libraryies that support promise working at the same way.
As you see, you returning def.promise(). That is the object which contain .then property. Because of that obj you can use $scope.ActionItems().then() method. That actually make def.promise().
And inside your async code (this code that consuming some time and it's not executed immediately) you defining def.resolve() or def.reject().
When the work is done. You calling def.resolve(withSomeData) and this will activate .then() method to the $scope.ActionItems.
For example:
var foo = null;
function doPromise() {
var def = jQuery.Deferred();
setTimeout(function(){
foo = 2;
def.resolve(foo + 1) // This will call the .then() method with foo + 1
}, 500);
return def.promise();
}
doPromise();
console.log(foo) // foo = null here. cuz the function waiting 500ms.
// Here the .then() method will be executed after ~500+ ms.
doPromise().then(function(fooValue) {
console.log(fooValue) // foo value = 3 here. cuz function is done
});