How to make synchronous call in Angular JS? - javascript

The following code supposed to be update username in the data base then retrieve updated username.
updateUserMame and getUserName are two different REST calls.
updateName(name) {
var obj = this;
if (name === 'None') {
name = null;
}
obj.UtilityService.updateUserName(name, obj.userId)
.success(function (data) {
if (data) {
obj.getUserName(obj.userId);
console.log('Name is updated for ID:'||obj.userId);
} else {
console.log('Something Wrong');
}
});
}
getUserName(userId){
obj.UtilityService.getUserName(userId)
.then(function (result) {
console.log(result.user.userId);
}
}
I have user name 'Nathan Drake' in the dataBase.
When I run the update function with 'Elena Fisher', it is returning 'Nathan Drake'.
I've read some articles to make synchronus service calls, but unable to figure out what is going wrong.
Please help.

You could wrap your update function in a promise:
var updatePromise = $q.when(updateName(name)); // creates a promise
When your promise has finished processing, you can resolve it using then() which takes a success callback and an error callback
updatePromise().then(function successCallback(response){ // resolves the promise using then
getUserName(userId) // execute the rest of your code
},
function errorCallback(response){
console.log(error)
});
You would need to inject $q into the scope you are working with

Your code does not make much sense, that is I see possible mistakes as it looks like you are interchanging user name and user id and calling the obj context from inside a function even when its not declared there etc. Either we are missing code or this will fail when you try to run it.
Here is your example with some fixes and comments that show how you could do it using callbacks (no sync code, as mentioned by everyone else on this thread you should avoid actually waiting for I/O and use callbacks instead).
updateName(name) {
var obj = this; // good, you captured this
if (name === 'None') {
name = null;
}
obj.UtilityService.updateUserName(name, obj.userId)
.success(function (data) {
if (data) {
// ok, you successfully updated the name so why would you go back to the server and get it again? You know the value based on your update.
console.log('Name is updated for ID:' + obj.userId.toString());
// for your example though here is how you could handle it
obj.getUserName(obj, obj.userId, function(user){ // i assumed the name is stored in variable userName
console.log('Name from server = ' + user.userName); // no idea what you are returning but you can figure it out from here
// maybe you also want to capture it again??
obj.name = user.userName;
});
} else {
console.log('Something Wrong');
}
});
}
// pass in captured this as obj, the user id, and a callback
getUserName(obj, userId, callback){
obj.UtilityService.getUserName(userId)
.then(function (result) {
callback(result); // call the callback with the result. The caller can then do something with it
}
}

Related

How to wait till the response comes from the $resource request, in angularjs?

I am going to tell you a bit about what I am doing so you may help me. I am reading some records from a .txt and for each record I need to make some verifications, in order to do this, I make a $resource call to my backend service to get the regex which will be use to verified each record.
I need to wait for the response of the service. I have this (I use $recourse for the get with .factory) :
function findRegex() {
var data;
var deferred = $q.defer();
data = findRegexCountry.get({ number: $scope.number }).$promise.then(function(data) {
deferred.resolve(data.body);
});
return deferred.promise;
}
and I do can, successfully, use it in the function I need like this:
//validar tipo 2
var bool = false;
if (tipo == 2) {
if (numbers.test(split[0]) && numbers.test(split[1])) {
$scope.number = '58';
findRegex().then(function(data) {
bool = true;
// console.log('data', data);
$scope.regexResponse = data;
regex_all = data.regex_all;
regex_length = data.regex_length;
regex_justCountry = data.regex_justCountry;
regex_justCarriers = data.regex_justCarriers;
console.log('1. regex_justCarriers ', regex_justCarriers);
console.log('1. regex_length ', regex_length);
});
//nothing here :( SOS
console.log('2. regex_justCarriers ', regex_justCarriers);
This works, but I NEED to wait for the response in order to continue with my code, let me tell you why (maybe you can give me a better idea).
I can't make all the logic inside findRegex(), first of all because I don't want to make this call everytime I read a record from the .txt. I want to get the regex from the service one time and if this first record I am checking is a valid record for me, the other ones will be using the variables I already got with the first call to the service, there are other reasons, but mainly this, I can't make all the code I need to inside this.
What can I do?
Your function findRegex is returning a promise object, not the processed data. findRegex().then(...) also returns immediately with an another promise. You can continue doing the things needed inside the first then, or you can extend the promise chain with another .then(). And at last but not least, you need to take care the possibility of errors with a catch like this:
findRegex().then(function(data) {
bool = true;
// console.log('data', data);
$scope.regexResponse = data;
regex_all = data.regex_all;
regex_length = data.regex_length;
regex_justCountry = data.regex_justCountry;
regex_justCarriers = data.regex_justCarriers;
console.log('1. regex_justCarriers ', regex_justCarriers);
console.log('1. regex_length ', regex_length);
return data // just in case, if you need it later
}).then(function(data) {
console.log('2. regex_justCarriers ', regex_justCarriers);
}).catch(function(error) {
console.log('something went wrong', error);
})

Get Value from parameter function

Sorry for the Noob Question. I'm trying to write a node.js function called "getTransitionId" that uses the jira-connector plugin to retrieve data for possible transitions for a particular issue.
The getTransitions function from the jira-connector takes two parameters: an object with the parameters of the ticket, and a function to execute once the call is finished.
Here's my problem: for reasons beyond the scope of this question, I want to access this data outside the function that's being passed as parameter to "getTransitions." But I can't figure out how. I understand that the last return statement (return "transitionData") is returning "undefined" because it's executing a return statement before the call is finished, but I don't know how to fix that.
Can I correctly use a callback in this case? If so, how would I use it in a function that is being passed as a parameter to another function?
const JiraApi = require('jira-connector');
const jira = new JiraApi( {
host: //Jira URL
basic_auth: {
//Authentication Information
}
});
function getTransitionId (ticketNumber, transition) {
jira.issue.getTransitions({
issueKey: ticketNumber,
}, function(error, transitions){
const transitionData = transitions['transitions'];
});
return transitionData;
}
Thanks for the help. Hope this made sense.
You could make your own getTransitionId function take a callback function as an argument. Here's an incomplete example (see ahead):
function getTransitionId (ticketNumber, transition, callback) {
jira.issue.getTransitions({
issueKey: ticketNumber,
}, function(error, transitions){
const transitionData = transitions['transitions'];
const id = /* ..get ID fron transitionData, somehow.. */
callback(id);
});
}
// Called like this:
getTransitionId(ticketNumber, transition, function(id) {
console.log("Got the ID:", id);
});
This isn't perfect, though. What if getTransitions has an error?
When you call jira.issue.getTransitions, you pass a callback function which takes two parameters: error and transitions. This is standard for functions which take callbacks in JavaScript - that is, callbacks usually take an error parameter (null or undefined if there was no error) and a data parameter (containing results of the action, like fetched transitions or an id).
We can change getTransitionId to take an error and then pass the error to the callback that you gave to getTransitionId:
function getTransitionId (ticketNumber, transition, callback) {
jira.issue.getTransitions({
issueKey: ticketNumber,
}, function(error, transitions){
if (error) {
callback(error);
return;
}
const transitionData = transitions['transitions'];
const id = /* ..get ID fron transitionData, somehow.. */
callback(null, id);
});
}
(Note that we use a return; statement inside if (error) -- that's so that we don't continue and try to use the transitions argument, which is probably undefined, since there was an error in jira.issue.getTransitions. This also prevents callback from being called a second time.)
Since we've added an error argument, we need to change how we call getTransitionId:
getTransitionId(ticketNumber, transition, function(error, id) {
if (error) {
console.error("There was an error fetching the transition ID:", error);
return;
}
console.log("Got the ID:", id);
}
(Since we do callback(null, id); in the code for getTransitionId, error will be null, so the code in if (error) { won't run. Of course, if there is an error, if (error) { will be run, and that's what we want!)
By adding code to handle errors passed to your callbacks, you make your code safer. Contrastingly, if you ignore error, you might end up having errors in your code that are hard to find - for example, you might have a TypeError because transitions is undefined, or see "Got the ID: undefined" in the log!

The variable scope/nesting of AngularJS variables

I have this angular controller:
app.controller('FeedCtrl', function ($scope, Profile) {
$scope.getID = function() {
Profile.getUID()
.then(function (data) {
if (data !== null) {
console.log(data.id); // returns correct id
$scope.data = data;
} else {
console.log("Could not retrieve id");
}
}, function (error) {
console.log(error);
});
console.log($scope.data); // logs: undefined
return $scope.data; // logs: undefined
};
var somedata = $scope.getID();
console.log(somedata); //just returns undefined
});
And this Factory that the controller uses for a JSON request.
module.factory('Profile', function($http, $localStorage) {
return {
getUID:function(){
return $http.get("https://graph.facebook.com/v2.2/me", {params: { access_token: $localStorage.accessToken, fields: "id,name,gender,location,website,picture,relationship_status", format: "json" }})
.then(function(response) {
if (typeof response.data === 'object') {
return response.data;
} else {
// invalid response
return $q.reject(response.data);
}
}, function(response) {
// something went wrong
return $q.reject(response.data);
});
}
};
});
The Question
I am unable to change the value of $scope.data for use outside the $scope.getID function but inside the rest of the FeedCtrl.
If you look on the comments you see what I am getting returned in the console logs.
I've tried to understand this problem by searching here in StackOverflow and Google but it seems that I don't understand the $scope concept of AngularJS.
I am grateful for any push in the right direction.
That's a classic mistake, the code you're calling is asynchronous, look at your console and watch the order of your logs, the log that will return the correct id will be the last one because it will be called only after the promise has been resolved.
Is this enough of a push in the right direction for you?
A very simple example, but it's the same principle.
setTimeout(function(){
document.write('A2: Timeout is done');
}, 5000);
document.write('A1: Called timeout, this gets logged before A2 even though my line number is higher.');
That is not a scope problem, it's a time problem. You are trying to use the value before it exists.
In the controller you can only use the value after the result has arrived, i.e. in the callback for the then method. The return statement runs before there is a result, so you can't return it.
Once you have made an asynchronous call, the result has to be handled asynchronously. You can return a Future object to handle the result when it arrives, but you can never make a function that makes an asynchronous call and returns the result itself.
Your code is asynchronous. I wrote a response to this exact same problem in this post.
Returning after ajax call prints false

Un Ordered execution of the instructions

When I am calling Details function it is giving empty details because Details function is executing before getting the data from the json file. How to resolve the problem?
app.controller('loginCtrl',function($scope,login){
$scope.user=login.Details();
}
app.factory('login',function($cookieStore,$http){
var users=[];
$http.get("js/user.json").success(function(data){
angular.copy(data,users);
});
return{
Details:function()
{
alert(users);
return users;
}
}
You need to update $scope.user in the success callback of your $http.get. The best way to do that is to define the success function in your controller and pass it into your service. So your service becomes:
app.factory('login', function($cookieStore,$http){
var userCache;
return {
doLogin: function(user, password, successCallback) {
if(!userCache) {
$http.get("js/user.json").success(function(data) {
userCache = data;
successCallback(data);
});
}
}
}
}
and your controller gets this added somewhere in a click handler or something:
login.doLogin('sampleUsername', 'samplePassword', function(data) {
$scope.user = data;
});
That should do most of what you need, you might need to adjust depending on how you're validating logins and what that sample JSON file contains. Good luck.
Of cousre it wil give You empty user , because you've defined your var user=[];
and then and Ajax call , and then you are returning that user , So because you're not doing this asynchronously , all of them will fire synchronous and Javascript will be pleased to return an emtpy user :!!!
There are some ways to solve this , using promise is one of them
app.factory('login',function(){
return{
Details:function(){
promise = $http.get("js/user.json");
promise.then(function(data){
return data;
});
}
}
});
OR you can Simply do this :
app.factory('login',function(){
return{
Details:function(){
$http.get("js/user.json")
.success(function(data){
return data;
})
}
}
});

Returning a value from 'success' block in JS (Azure Mobile Service)

I have a rather simple getUser method that I'm having some trouble with. I am not deeply familiar with scopes and such in JS so this is giving me a head ache. Basically I want to fetch an object from the database and return it to the calling method:
function getUser(uid)
{
var result = null;
var userTable = tables.getTable('Users');
userTable.where({
userId: uid
}).read({
success: function (results) {
if (results.length > 0) {
result = results[0];
console.log('userid'+result.id);
}
}
});
console.log('userid-'+result.id); // undefined!!
return result;
}
Also, returning from inside the success doesn't return from getUser, but just the function defined inside. I tried "result = function(results)" as well but it stores the defined function and not the return value.
How am I supposed to do this?
I found a solution to this elsewhere. In practice (to the best of my understanding), it is not possible to do this within a JavaScript with asynchronous functions. What you need to do is create a recursion instead from inside the success handler.
Because the call to the database is asynchronous, your last two lines are executed (and hence result is undefined) before the call the database actually finishes. So you need to handle everything inside your success callback. Or, if your getUser() func is a helper, you could structure your code (without recursion) like this with a callback:
function insertOrWhateverCallingMethod()
{
var uid = 'blah';
getUser(uid,function(user) {
// Do something with the user object
});
}
function getUser(uid,callback)
{
var result = null;
var userTable = tables.getTable('Users');
userTable.where({
userId: uid
}).read({
success: function (results) {
if (results.length > 0) {
result = results[0];
console.log('userid'+result.id);
callback(result);
}
}
});
callback(null);
}
The code above assumes you're in a table script, where the tables object is available - if it's not you can pass it as a parameter to getUser().

Categories

Resources