Javascript/AngularJS Scope Issue - javascript

Im trying to catch errors returned from my server and return them at the end of a login function. If it succeeds, no errors will be returned and if it fails the list of errors will be returned. The login code is part of an AngularJS service as below:
angular.module('auth').service('RestfulAuthService',['$http','REST_BASE_URL',function($http,base_url){
var self = this;
//define backend urls
var api_urls = {
login: base_url+'/login/',
}
//hold user credentials to be accessed
var api_user = {
username:null,
email:null,
first_name:null,
last_name:null,
}
var api_user_token = null;
self.user_profile = function(){
return api_user;
}
self.login = function(username,password){
var errors = {none:null};
$http.post(api_urls.login,{username:username,password:password})
.then(function(response){ //success
//extract data
api_user.username = response.data.username;
api_user.email = response.data.email;
api_user.first_name = response.data.first_name;
api_user.last_name = response.data.last_name;
api_user_token = response.data.token;
//Add auth token to headers for all future requests
$http.defaults.headers.common['Authorization'] = api_user_token;
errors = {};
},function(response){ //error
errors = response.data; //return serializer errors
});
return errors;
};
//REST OF SERVICE ...
The value returned however is always {none:null}. In other words, the errors variable hasnt been changed by the success or failure functions. I'm pretty sure this is a scoping issue, but I don't know how to fix it.

It is a scoping issue, but it is more so a synchronization issue. The HTTP request starts and return errors; is executed long before any of the .then code is reached. You have to use a callback to pass the error data.
self.login = function(username,password,callback){
var errors = {none:null};
$http.post(api_urls.login,{username:username,password:password})
.then(function(response){ //success
//extract data
api_user.username = response.data.username;
api_user.email = response.data.email;
api_user.first_name = response.data.first_name;
api_user.last_name = response.data.last_name;
api_user_token = response.data.token;
//Add auth token to headers for all future requests
$http.defaults.headers.common['Authorization'] = api_user_token;
errors = {};
callback(errors);
},function(response){ //error
errors = response.data; //return serializer errors
callback(errors);
});
};
The calling code must call with the callback, and use its argument to access the errors.
self.login(username, password, function(errors) {
// handle errors
});

Related

Angular success function called before http.get function returns

I have an angular controller which makes an HTTP GET request and on the promise return, calls either a success of error function. My code right now will sometimes execute the success function after the GET request returns and sometime execute before it. Is there something I'm messing up in my promise handling? Something to note, sometimes the http GET doesn't even get called (or at least its breakpoint) and the success function happens regardless. Here is my code:
.controller('CheckOutCtrl', ['$scope', '$http', function($scope, $http) {
//Controller for checkout feature
$scope.owner = "Unclaimed"; //Default owner
$scope.endDate = "";
$scope.unclaimed = true;
$scope.showpopup = false; //Should we show the popup that checkout is successful or returned
$scope.currentOwner = false; //Show return date
$scope.popuptext = "";
$scope.checkOut = function(){ //Extends or creates a check out
$http.get("/checkout/extend/code/" + code + "/username/" + userName).then(
function success(response, status, headers, config) {
console.log("Checked out or extended");
$scope.showpopup = true;
$scope.currentOwner = true;
$scope.popuptext = response.data; //Show airport checked out until or error
console.log($scope.popuptext);
init(); //Update current owner
},
function error(response, status, headers, config) {
$scope.error = response;
console.error("Check out error:", response);
}
);
};
}
I discovered this was happening because Angular caches GET requests for some time and the cached version of my request was being used.

AngularJS - How do I capture JSON returned from a GET service method regardless of http status returned

I have an AngularJS app that I want to alert or capture the message of the following two returned JSON values, either on success or failure.
Two problems occur. On status code 500 I can not get the Message value of the returned JSON I get undefined when I try to alert msg. On success I can not parse the JSON either.
Message in Network console
GET inviteUsers 500 Internal Server Error
{"Message":"Users are not available"}
What do I need to do to make this work?
JSON on failure - returns status code 500
{"Message":"Users are not available"}
JSON on success
{"Message": "Invitations sent successfully"}
Controller Method
$scope.inviteUsers = function(){
var msg = JSON.parse(createNewUserService.inviteUsers().query()["Message"]);
}
Service Method (Method GET)
var _inviteUsers = function(){
return $resource(serviceBase + 'inviteUsers',
{
});
};
The following helped achieve the desired result. The key was to use angularjs promises.
var msg;
$scope.inviteUsers = function(){
var inviteUsers = createNewUserService.inviteUsers().query();
inviteUsers.$promise.then(function(data){
msg = JSON.parse(data).Message;
notify(msg);
},
function(error){
msg = "No invitations sent";
notify(msg);
});
}
In fail condition you can access your message in error callback function
var msg;
var inviteUsers = createNewUserService.inviteUsers().query();
inviteUsers.$promise.then(function(data) {
// success handler
msg = JSON.parse(data)["Message"];
}, function(error) {
// error handler
msg = JSON.parse(error)["Message"];
});
You're getting the Message property wrong.
So update this:
var msg = JSON.parse(createNewUserService.inviteUsers().query()["Message"]);
to:
var msg = JSON.parse(createNewUserService.inviteUsers().query()).Message;
Update:
Regarding fail conditions, we should check it first if there's a response or the response is valid.
var msg = "Users are not available";
var resp = createNewUserService.inviteUsers().query();
if(resp)
msg = JSON.parse(resp).Message;

Function needs to return Rest Call response as JSON object. How to set the response to a variable so that it can be return as variable

var Client = require('node-rest-client').Client;
var client = new Client();
module.exports = {
getWeatherStatus: function() {
var messageData = "";
client.get("http://api.openweathermap.org/data/2.5/weather?q=Pune&appid=123234234234243242", function (data, response) {
console.log(JSON.parse(data));
messageData=data;
});
//how to set the response of that rest call to this messageData object
return messageData;
}
}
this method getWeatherStatus should return the rest response in json format.
Open for totally different suggestion to implement this kind of scenario.
My basic requirement is to use this REST call response and send to other functions.
In getWeatherStatus you use async function client.get. You need wait result from async function and only than return messageData. For this you can use deasync. Example:
var Client = require('node-rest-client').Client;
var client = new Client();
module.exports = {
getWeatherStatus: function() {
var messageData = "";
client.get("http://api.openweathermap.org/data/2.5/weather?q=Pune&appid=123234234234243242", function (data, response) {
console.log(JSON.parse(data));
messageData=data;
});
//We waiting for data.
while (messageData === "") {
require('deasync').sleep(10);
}
return messageData;
}
}
But, maybe, you should return Promise, not data.
Since get is callback function so you have to put your return messageData
in stead of messageData=data.
Code should be like
var Client = require('node-rest-client').Client;
var client = new Client();
module.exports = {
getWeatherStatus: function() {
var messageData = "";
client.get("http://api.openweathermap.org/data/2.5/weather?q=Pune&appid=123234234234243242", function (data, response) {
return JSON.parse(data);
});
}
}
I think you are facing difficulties to deal with with callbacks,
In the method getWeatherStatus, instead of returning the result, you should pass it to a callback function once the treatment is done.
If really you are required to return, galk.in answer seems to be a possible way.
Otherwise, check this out,
var Client = require('node-rest-client').Client;
var client = new Client();
module.exports = {
getWeatherStatus: function(then) {
var messageData = "";
client.get("/some/url", function (data, response) {
then(err=null, JSON.parse(data));
});
}
}
So you may call getWeatherStatus in such way,
// Somewhere else in your code
getWeatherStatus(function fnCallback(err, jsonData) {
console.log(jsonData) // process data here
})
As suggested, Promise are also a good alternative. but it is still async.

How to change the variables of a factory with async call?

I am sort of new to Angularjs and I am trying to find the optimal structure to do such flow:
Get an access_token from my server asynchronously
Store it in a provider as a variable to be used in the future
Make async calls to the third party server with the access_token
My factory currently looks like this
app.factory('SomeFactory',['$resource', function($resource){
//access_token only needs to be set once
var access_token = 0;
var request = $resource('/my/server/').get();
request.promise.then(function(result){
access_token = result;
}
);
return $resource('https://third.party/:token',{token: access_token});
}])
I can't set the access_token, the call back function is to be destroyed somehow.
Also how can I form a chain, so that third party cannot be called until the access_token has been set first?
try this
app.factory('SomeFactory',['$resource, $q', function($resource, $q){
var service = {};
//access_token only needs to be set once
var access_token = null;
getAccessToken = function() {
var deferred = $q.defer();
if (access_token) {
deferred.resolve(access_token);
} else {
$resource('/my/server/').then(function(result){
access_token = result;
deferred.resolve(access_token);
});
}
return deferred.promise;
}
service.callThirdParty = function() {
var deferred = $q.defer();
getAccessToken.then(function(access_token) {
$resource('https://third.party/:token',{token: access_token}).then(function(result) {
deferred.resolve(result);
})
})
return deferred.promise;
}
return service;
}]);

Updating outside variables inside a javascript function in Node.js

I am developing a NodeJS application and encountered following problem:
I am using node module node-rest-client to issue REST requests using an API. I use post method provided by the module for my purpose. I need to fetch the json response and write it to seperate variables and return them.
I have defined returnData variable outside the client.post method. I need to update this returnData variable inside the function which is passed as a parameter to the client.post method.
But I have a scope issue here. Although I try to update the returnData variable inside that function, when execution returns from client.post function, I see that the same values I have set (in this case null, but may be any value) before calling client.post function still persists in the variable.
How can I define scope well so that I can update an outside variable inside the function which I pass as a parameter to another function? Any help would be greatly appreciated.
Following is my Code:
module.exports = function(){
require("../config");
var restClient = require('node-rest-client').Client;
var client = new restClient();
var sessionID = null,
reqID = 1;
var login = function(username, password){
var requestParams = {};
var apiParams = {};
requestParams.jsonrpc = "2.0";
requestParams.method = ZABBIX_API_METHODS.login;
apiParams.user = username;
apiParams.password = password;
requestParams.params = apiParams;
requestParams.id = reqID;
requestParams.auth = null;
var args = {
data: requestParams,
headers:{"Content-Type": "application/json-rpc"} // ask response type to be application/json-rpc
};
var returnData = {};
returnData.status = null;
returnData.data = null
client.post(ZABBIX_API, args, function(resData,rawRes){
if(rawRes.statusCode == 200){
returnData.status = rawRes.statusCode;
returnData.data = resData;
}
else{
returnData.status = rawRes.statusCode;
returnData.data = "Request Failed!";
}
reqID = reqID + 1;
console.log(returnData.data);
});
console.log("SessionID:"+getSessionID());
return returnData;
}
var functions = {
login: login
}
return functions;
}
Thank you.
.post is Async, you should do it like this,
var login = function(username, password, callback){
..................
client.post(ZABBIX_API, args, function(resData,rawRes){
if(rawRes.statusCode == 200){
returnData.status = rawRes.statusCode;
returnData.data = resData;
}
else{
returnData.status = rawRes.statusCode;
returnData.data = "Request Failed!";
}
reqID = reqID + 1;
return {login: returnData};
});
//remove all below return statements

Categories

Resources