cannot update variable using AngularJS - javascript

I am new to AngularJS and I am trying to send http request using .foreach loop. Here's my code
app.controller('myCtrl', function($scope, $http) {
var rd;
$http.get(furl,config).then(function mySucces(response) {
rd = response.data;
var webcontent = "";
angular.forEach(rd, function(rd1){
$http.get(furl1 + rd1.slug,config).then(function(res){
webcontent += res.data.title;
console.log(webcontent);//console 1
});
});
console.log(webcontent);//console 2
$scope.myWelcome = webcontent;
}, function myError(response) {$scope.myWelcome = response.statusText;});});
I was expected the console 2 will display the combined "res.data.title", however, it only shows the initial value.(which is empty in this case). The console log 1 is showing correctly - list the increasing "webcontent" variable.
Not sure how to keep the "webcontent" (console 2) updated value. Any response will be appreciated! Thanks!

This isn't an angular problem, this is an asynchronous javascript problem. Your code finished before your promise completes. You could use the query library to wait for all the promises to resolve, like so:
app.controller('myCtrl', function($scope, $http, $q) {
var rd;
$http.get(furl, config).then(function mySucces(response) {
rd = response.data;
var webcontent = "";
var promises = [];
angular.forEach(rd, function(rd1) {
promises.push($http.get(furl1 + rd1.slug, config);
});
$q.all(promises).then(function (results) {
angular.forEach(results, function (result) {
webcontent += result.data.title;
}
$scope.myWelcome = webcontent;
});
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});

You could just remove the webcontent variable entirely and update the $scope.myWelcome variable directly in it's place, it should work then. So:
app.controller('myCtrl', function($scope, $http) {
var rd;
$http.get(furl,config).then(function mySucces(response) {
rd = response.data;
$scope.myWelcome = "";
angular.forEach(rd, function(rd1){
$http.get(furl1 + rd1.slug,config).then(function(res){
$scope.myWelcome += res.data.title;
console.log(webcontent);//console 1
});
});
}, function myError(response) {$scope.myWelcome = response.statusText;});});

Ajax Calls are always async tasks, they are something similar window.setTimeout. It is impossible to write your code task by task. have a look:
console.log(1);
window.setTimeout(console.log.bind(console, 2));
console.log(3);
This happens because async tasks are executed in subsequent event loops (in the future).
Finally, your snippet could be something like that:
$http
.get(furl, config)
.then(function(response) { return response.data; })
.then(function(resources) {
return $q.all(resources.map(function(resource) {
return $http.get(furl1 + resource.slug, config);
}));
})
.then(function(results) {
return results.map(function(result) {
return result.data.title;
}).join('');
})
.catch(function(response) {
return response.statusText;
})
.then(function(greetings) {
$scope.myWelcome = greetings;
})
;

Related

How to wait until 2 $http requests end in angularjs

I need to process responses of two different $http requests. What is the best way to do so, knowing that I have to wait for answers of both request before to process their results.
I think I must use something like async, promise, await features, but I cannot figure out how to do so.
var app = angular.module('Async', []);
app.controller('async', function($scope, $http, $timeout, $interval) {
$scope.getCamionTypes = function() {
$http.get("../services/getCamionTypes.php")
.then(function mySucces(response) {
$scope.camionTypes = response.data;
}, function myError(response) {
camionTypes = [];
});
} ;
$scope.getParametres = function() {
var b = $http.get("../services/getParametres.php")
.then(function mySucces(response) {
$scope.parametres = response.data;
}, function myError(response) {
$scope.parametres = [];
});
}
//I make here the first call
$scope.getCamionTypes();
//I make here the second call
$scope.getParametres();
//The following instruction must wait for the end of the 2 calls
console.log('Types de camion : ' + $scope.camionTypes + '\n' + 'Parametres : ' + $scope.parametres);
})
check this
let promise1 = $http.get("../services/getParametres.php");
let promise2 = $http.get("../services/getParametres.php");
$q.all([promise1, promise2]).then(result=>{
//console.log('Both promises have resolved', result);
})
Use Promise.all for such use cases. Promise.all takes an array of promises and gets resolved when both the promises are resolved. It will fail if any of the promises fail.
$scope.getCamionTypes = function() {
return $http.get("../services/getCamionTypes.php")
} ;
$scope.getParametres = function() {
return $http.get("../services/getParametres.php")
}
Promise.all([$scope.getCamionTypes(), $scope.getParametres()]).then(resp => {
//resp[0] and resp[1] will contain data from two calls.
//do all your stuff here
}).catch()
Thank you very much Samira and Shubham for your usefull help !
Here the code modified thank to your advises with the less impact on the architecture of my application.
Best regards.
var app = angular.module('Async', []);
app.controller('async', function($scope, $http, $timeout, $interval, $q) {
$scope.getCamionTypes = function() {
let promise = $http.get("https://www.alphox.fr/ModulPierres_dev/services/getCamionTypes.php")
promise.then(function mySucces(response) {
$scope.camionTypes = response.data;
}, function myError(response) {
camionTypes = [];
});
return promise;
} ;
$scope.getParametres = function() {
let promise = $http.get("https://www.alphox.fr/ModulPierres_dev/services/getParametres.php")
promise.then(function mySucces(response) {
$scope.parametres = response.data;
}, function myError(response) {
$scope.parametres = [];
});
return promise;
}
//I make here the first call
let promise1 = $scope.getCamionTypes();
//I make here the second call
let promise2 = $scope.getParametres();
$q.all([promise1, promise2]).then (result=>{
//The following instructions wait for the end of the 2 calls
console.log('Types de camion : ');
console.log($scope.camionTypes);
console.log('Parametres : ');
console.log($scope.parametres);
$scope.both = {camionTypes: $scope.camionTypes, parametres: $scope.parametres}
});
});

AngularJS and angular factory

I have asked similar question before, this time I am stuck with recording data to the blockchain using Angular js and Angular Factory. Please see the code below and advise me where I am wrong
app.js
var app = angular.module('application', [])
app.controller('appController',function($scope, appFactory) {
$('success_create').hide()
$scope.recordData = function(){
appFactory.recordData($scope.data, function(data){
$scope.recordData = data
$("success_create").show()
})}}
app.factory('appFactory',function($http) {
var test = []
factory.recordData = function(data, errorCallback) {
test = data.field1+"-"+data.field2
$http.get('/record_data'+data).then(function(output) {
if (output) {
callback(output)
}).catch(function(error) {
errorCallback(error) })}
return factory
There are so many errors in you're code, that I was considering not to awnser.
But as I felt the need to help you, take the code below as a guide.
var app = angular.module('application', [])
app.controller('appController', function($scope, appFactory) {
// Use angular.element instead of the jQuery `$` selector
angular.element('success_create').hide();
$scope.recordData = function()
{
// The factory returns a promise,
// so you can do the same just as you would with $http
appFactory.recordData($scope.data).then(function(response) {
$scope.recordData = response.data;
angular.element("success_create").show()
});
}
});
app.factory('appFactory',function($http) {
// You define the var as array, but you assign a string later on
// So instead of var test = [] use var test = "" or just var test;
var test = ""; // Or var test;
var factory = {
recordData: function (data, errorCallback)
{
test = data.field1 + "-" + data.field2;
var promise = $http.get('/record_data' + data).then(function(output) {
return output.data;
});
// $http returns a promise, return this to your controller
// You can use the data it returns just like you
// would with the $http method
return promise;
}
}
// In your original code, you return the factory. But you never
// Defined the factory.
return factory;
});
Try out these simply tutorials to learn more about controllers, services ** and promises
https://www.w3schools.com/angular/angular_controllers.asp
https://www.w3schools.com/angular/angular_services.asp
https://docs.angularjs.org/api/ng/service/$q
** Confused about Service vs Factory
#Tabz: modified your code.
app.controller(appController,function($scope, appFactory) {
$("success_create").hide();
$scope.recordData = function(){
appFactory.recordData($scope.data, function(data){
$scope.recordData = data
$("success_create").show();
})
}
})
app.factory("appFactory", function($http) {
factory.recordData = function(data, errorCallback)
$http.get('/record_data'+data).then(function(output) {
if (output)
callback(output)
}).catch(function(error) {
errorCallback(error)
})};
return factory

$http timing issues, AngularJS

Have two issues. I am trying to get a value from an $http response and populate a variable with it that should then update a couple DOM objects. Problem is that it seems to be having a timing issue where the function that called the $http service completes and then the variable gets updated but doesn't seem to update everywhere it should. I also tried putting a watch on the variable and it only seems to fire off when the page is initially loaded. I'ved been reading up all this all day and cant seem to find an answer that works.
app.controller('MainCtrl', ['$scope', '$http', 'waciServ', function($scope, $http, waciServ) {
"use strict";
$scope.currentSource = waciServ.activeSource;
$scope.$watch('waciServ.activeSource', function(newValue, oldValue) {
$scope.currentSource = newValue;
console.log('Watcher! ' + newValue);
}/*, true*/);
$scope.getActiveSource = function () {
$scope.currentSource = waciServ.getStringByName("active_device");
};
}]);
app.service('waciServ', function($http) {
var self = this;
this.waciIP = location.host;
this.activeSource = '';
this.getStringByName = function (name) {
$http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableByName&param1=" + name + "&encoding=2")
.then (function (response) {
var was_error = self.read(response.data);
if (was_error == '1') { //active_device is not set
self.assignVariable(name, "none");
self.activeSource = "none";
return self.activeSource;
} else {
var varId = parseInt(self.read(response.data));
$http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableValue&param1=" + varId + "&encoding=2")
.then (function (response) {
self.activeSource = self.read(response.data);
return self.activeSource;
});
}
}, function (error) {
console.log("error: " + error.data);
});
};
});
i can place a console.log right before the return fires and see that I have what I want, but another console.log placed in the function within the controller shows 'undefined'.
What gives? Thank you in advance.
You don't need to think about to use watcher.
Basically the problem is you are not returning promise from the service method. You should return promise of $http method calls from your service method .Thereafter use .then over method call to chain promise & put success & error function in it. (this answer is little similar with what you are asking but not exactly)
Service
self.getStringByName = function(name) {
//returned promise from here
return $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableByName&param1=" + name + "&encoding=2")
.then(function(response) {
var was_error = self.read(response.data);
if (was_error == '1') { //active_device is not set
self.assignVariable(name, "none");
self.activeSource = "none";
return self.activeSource; //returned data here to chain promise
} else {
var varId = parseInt(self.read(response.data));
//returned promise from here
return $http.post("http://" + self.waciIP + "/rpc/", "method=GetVariableValue&param1=" + varId + "&encoding=2")
.then(function(response) {
self.activeSource = self.read(response.data);
//returned data from here
return self.activeSource;
});
}
}, function(error) {
console.log("error: " + error.data);
});
};
Controller
app.controller('MainCtrl', ['$scope', '$http', 'waciServ', function($scope, $http, waciServ) {
"use strict";
$scope.currentSource = waciServ.activeSource;
$scope.getActiveSource = function () {
waciServ.getStringByName("active_device").then(function(source){
$scope.currentSource = source;
});
};
}]);

Function in angular service returning data late?

I have a service that contains a function to set and return default user preferences. I am experiencing a strange problem that I believe has to do with the async nature of returning the data. I will show you the calls and then explain the problem.
The service is defined as follows:
var StateService = angular.module('StateService', [])
.service('HoldState', function ($http, $q) {
In the app.js I have the following injection:
var JBenchApp = angular.module('JBenchApp', [
'ngRoute',
'StateService'
]);
In the controller I also have the following injection:
JBenchApp.controller('CaseListCtrl', ['$scope', '$http', 'HoldState',
function ($scope, $http, HoldState) {
The following is the function I am calling:
this.getUserDefaults = function (UserID) {
var userDefaults = [], deferred = $q.defer();
$http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/Default/' + UserID)
.then(function (response) {
userDefaults = response;
//var status = getStatus();
var status = localStorage.getItem('Status');
// If the status is 0 then we have not yet navigated anywhere so we will need to set the path values to be
// the same as the default. We do nothing if status is not 0 because it means we already have path values set
if (status == 0 || status == null) {
/**setTypeOfLaw(response.LitigationCode);
setCourthouse(response.LocID);
setDepartment(response.CourtRoom);**/
localStorage.setItem('LawType', response.LitigationCode);
localStorage.setItem('Building', response.LocID);
localStorage.setItem('Dept', response.CourtRoom);
localStorage.setItem('Status', 1);
}
alert("value: " + userDefaults.PreferenceID);
deferred.resolve(response);
}, function (response) {
console.log(response.status + " -- " + response.data + " -- " + response.statusText);
});
return deferred.promise;
};
The following is the code where I am seeing the strange issue:
$scope.fillDefaults = function () {
HoldState.getUserDefaults('dpeng').then(function (data) {
$scope.userDefaults = data;
//$scope.$apply();
});
}
$scope.fillDefaults();
The issue that I am seeing is that the function is called and entered. Processing then returns to the line $scope.userDefaults, but it winds up undefined. It seems that the code goes to through the $scope.fillDefaults function before the data is returned. I suspect this because the alert errors saying that it cannot find property PreferenceID of undefined. I have checked the API call through PostMan and it works just fine. What am I doing wrong here?
fillDefaults is a red herring; the problem is in getUserDefaults: you're assigning http.get's full response object to userDefaults, instead of the response data.
$http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/Default/' + UserID)
.then(function (response) {
userDefaults = response;
should be
$http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/Default/' + UserID)
.then(function (response) {
userDefaults = response.data;

AngularJS service retry when promise is rejected

I'm getting data from an async service inside my controller like this:
myApp.controller('myController', ['$scope', 'AsyncService',
function($scope, AsyncService) {
$scope.getData = function(query) {
return AsyncService.query(query).then(function(response) {
// Got success response, return promise
return response;
}, function(reason) {
// Got error, query again in one second
// ???
});
}
}]);
My questions:
How to query the service again when I get error from service without returning the promise.
Would it be better to do this in my service?
Thanks!
You can retry the request in the service itself, not the controller.
So, AsyncService.query can be something like:
AsyncService.query = function() {
var counter = 0
var queryResults = $q.defer()
function doQuery() {
$http({method: 'GET', url: 'https://example.com'})
.success(function(body) {
queryResults.resolve(body)
})
.error(function() {
if (counter < 3) {
doQuery()
counter++
}
})
}
return queryResults.promise
}
And you can get rid of your error function in the controller:
myApp.controller('myController', ['$scope', 'AsyncService',
function($scope, AsyncService) {
$scope.getData = function(query) {
return AsyncService.query(query).then(function(response) {
// Got success response
return response;
});
}
}
]);
This actually works:
angular.module('retry_request', ['ng'])
.factory('RetryRequest', ['$http', '$q', function($http, $q) {
return function(path) {
var MAX_REQUESTS = 3,
counter = 1,
results = $q.defer();
var request = function() {
$http({method: 'GET', url: path})
.success(function(response) {
results.resolve(response)
})
.error(function() {
if (counter < MAX_REQUESTS) {
request();
counter++;
} else {
results.reject("Could not load after multiple tries");
}
});
};
request();
return results.promise;
}
}]);
Then just an example of using it:
RetryRequest('/api/token').then(function(token) {
// ... do something
});
You have to require it when declaring your module:
angular.module('App', ['retry_request']);
And in you controller:
app.controller('Controller', function($scope, RetryRequest) {
...
});
If someone wants to improve it with some kind of backoff or random timing to retry the request, that will be even better. I wish one day something like that will be in Angular Core
I wrote an implementation with exponential backoff that doesn't use recursion (which would created nested stack frames, correct?) The way it's implemented has the cost of using multiple timers and it always creates all the stack frames for the make_single_xhr_call (even after success, instead of only after failure). I'm not sure if it's worth it (especially if the average case is a success) but it's food for thought.
I was worried about a race condition between calls but if javascript is single-threaded and has no context switches (which would allow one $http.success to be interrupted by another and allow it to execute twice), then we're good here, correct?
Also, I'm very new to angularjs and modern javascript so the conventions may be a little dirty also. Let me know what you think.
var app = angular.module("angular", []);
app.controller("Controller", ["$scope", "$http", "$timeout",
function($scope, $http, $timeout) {
/**
* Tries to make XmlHttpRequest call a few times with exponential backoff.
*
* The way this works is by setting a timeout for all the possible calls
* to make_single_xhr_call instantly (because $http is asynchronous) and
* make_single_xhr_call checks the global state ($scope.xhr_completed) to
* make sure another request was not already successful.
*
* With sleeptime = 0, inc = 1000, the calls will be performed around:
* t = 0
* t = 1000 (+1 second)
* t = 3000 (+2 seconds)
* t = 7000 (+4 seconds)
* t = 15000 (+8 seconds)
*/
$scope.repeatedly_xhr_call_until_success = function() {
var url = "/url/to/data";
$scope.xhr_completed = false
var sleeptime = 0;
var inc = 1000;
for (var i = 0, n = 5 ; i < n ; ++i) {
$timeout(function() {$scope.make_single_xhr_call(url);}, sleeptime);
sleeptime += inc;
inc = (inc << 1); // multiply inc by 2
}
};
/**
* Try to make a single XmlHttpRequest and do something with the data.
*/
$scope.make_single_xhr_call = function(url) {
console.log("Making XHR Request to " + url);
// avoid making the call if it has already been successful
if ($scope.xhr_completed) return;
$http.get(url)
.success(function(data, status, headers) {
// this would be later (after the server responded)-- maybe another
// one of the calls has already completed.
if ($scope.xhr_completed) return;
$scope.xhr_completed = true;
console.log("XHR was successful");
// do something with XHR data
})
.error(function(data, status, headers) {
console.log("XHR failed.");
});
};
}]);
Following this article Promises in AngularJS, Explained as a Cartoon
you need to retry only when the response comes under 5XX category
I have written a service called http which can be called by passing all http configs as
var params = {
method: 'GET',
url: URL,
data: data
}
then call the service method as follows:
<yourDefinedAngularFactory>.http(params, function(err, response) {});
http: function(config, callback) {
function request() {
var counter = 0;
var queryResults = $q.defer();
function doQuery(config) {
$http(config).success(function(response) {
queryResults.resolve(response);
}).error(function(response) {
if (response && response.status >= 500 && counter < 3) {
counter++;
console.log('retrying .....' + counter);
setTimeout(function() {
doQuery(config);
}, 3000 * counter);
} else {
queryResults.reject(response);
}
});
}
doQuery(config);
return queryResults.promise;
}
request(config).then(function(response) {
if (response) {
callback(response.errors, response.data);
} else {
callback({}, {});
}
}, function(response) {
if (response) {
callback(response.errors, response.data);
} else {
callback({}, {});
}
});
}
I ended up doing this a lot so I wrote a library to help address this problem : )
https://www.npmjs.com/package/reattempt-promise-function
In this example you could do something like
myApp.controller('myController', ['$scope', 'AsyncService',
function($scope, AsyncService) {
var dogsQuery = { family: canine };
$scope.online = true;
$scope.getDogs = function() {
return reattempt(AsyncService.query(dogsQuery)).then(function(dogs) {
$scope.online = true;
$scope.dogs = dogs;
}).catch(function() {
$scope.online = false;
});
}
}]);

Categories

Resources