I am working with a angular application and i have the following functions.
Function 1
vm.getInfo = function () {
var infoKey = "INFO1";
var url = "www.example.com" + InfoKey;
return datacontext.getData(url)
.then(function (response) {
return vm.infoResponse = response.data.texts;
});
}
vm.getInfo();
Function 2
vm.getDetails = function () {
var infoKey = "INFO2";
var url = "www.example.com" + InfoKey;
return datacontext.getData(url)
.then(function (response) {
return vm.detailsResponse = response.data.texts;
});
}
vm.getDetails();
Both the above functions have similar behavior, but only the infoKey and the return value changes. Right now i have written the functions like this. This might sound very silly, but how can i optimize this function to reduce the code redundancy.
Make a common function that accept infoKey and then only return the response.data.texts and Handel the VM variable at the call back function.
function getInfo(infoKey) {
var url = "www.example.com" + infoKey;
var promise = datacontext.getData(url);
return promise;
}
Calling function should do something like:
getInfo(infoKey).then((response)=> {
vm.detailsResponse = response.data.texts;
},(err)=>{
//Handle errors here.
});
Or, you could simply send a callback to the getInfo function and handle it there.
vm.getDetails = function (infoKey) {
var url = "www.example.com" + infoKey;
return datacontext.getData(url)
.then(function (response) {
if(infoKey=="INFO1"){return vm.infoResponse = response.data.texts;}
else{ return vm.detailsResponse = response.data.texts;}
});
}
vm.getDetails(infoKey);
hope this help you.
You can try following things -
1) Get infoKey as parameter & return response.data.texts-
function get(infoKey) {
var url = "www.example.com" + InfoKey;
return datacontext.getData(url)
.then(function (response) {
return response.data.texts;
});
}
2) Pass callable function as parameter to handle response -
function get(infoKey, handleResponse) {
var url = "www.example.com" + InfoKey;
return datacontext.getData(url)
.then(handleResponse);
}
Using it like this -
get('Infokey1', function onResponse(response) {
vm.infoResponse = response.data.texts;
})
Related
Using JavaScript and AngularJS, I have a controller function looking to set a bool based on the return of a service call, which awaits the return of an API call. How do I write the controller function to wait for the API response?
Controller...
var someBoolValue = false;
function firstCheck() {
// function checks other things
if (someCheck) {
// how do I set someBoolValue to await the response, this code did NOT work
SomeService.CheckforSomething(data, moreData).then(function (response) {
someBoolValue = response;
});
}
Service...
function CheckforSomething(data, moreData) {
var anImportantNumber = null;
var anotherNumber = 456;
// function does other things
anImportantNumber = 123;
if (someCondition) {
ApiService.GetMyData()
.then(function (data) {
anImportantNumber = data.ThisValue.WRT;
}
}
return (anImportantNumber != anotherNumber);
}
API Service...
function GetMyData() {
uri = 12345;
$http.get(uri)
.then(function (response) {
dererred.resolve(response.data)
}
return deferred.promise;
}
So I have a question that i've been trying to solve for hours.
My problem is that I'm getting the data faster than my services to load.
gen-service
function genEmpId() {
settingsService.getSettings().then(function (data) {
var comId = data.data[0].companyId;
console.log(comId);
var test = comId + ' - ';
return test;
});}
controller
function genId() {
var data = genService.genEmpId();
console.log(data); // getting the data too fast how to put a callback ?
}
So when my controller load its calling the service but im getting an undefined return value.
try this, In your code you not returning anything and another thing is it's async call to you have to wait until it finishes.
// gen-service
function genEmpId() {
return settingsService.getSettings().then(function (data) {
var comId = data.data[0].companyId;
console.log(comId);
var test = comId + ' - ';
return test;
});
}
// controller
function genId() {
var data = genService.genEmpId().then(function (data) {
console.log(data);
})
}
I got this function that calls an external service, works the results and then returns a single variable.
I want this variable to be inserted into an input but I'm doing something wrong cause instead of updating the form at the end of the function (as expected) I have to call the function a second time and the code updates the field with the value of the FIRST execution...
This is the controller:
$scope.cercaClienteNomeCognome = function() {
if ($scope.nome == undefined){
var name = "";
} else name = angular.uppercase($scope.nome);
if ($scope.cognome == undefined){
var surname = "";
} else surname = angular.uppercase($scope.cognome);
var url = "servizi/getClienteNomeCognome?nomeCliente="+name+"&cognomeCliente="+surname;
esitoRicercaEstesa = TreeService.avviaRicercaEstesa(url);
if (esitoRicercaEstesa == "true") {
vm.cercaSecondario = TreeService.getProClie(); // THIS_LINE
}
};
vm.cercaSecondario is the field that I'm trying to update.
This is the service:
service.avviaRicercaEstesa = function(url) {
service.url = url;
$http.get(url)
.success(function(data, status, headers, config) {
service.apriModaleEstensioneRicerca(data);
})
.error(function(data, status, headers, config) {
toaster.error("[SERVIZIO RECUPERO CLIENTI] Errore durante il ritrovamento dei clienti");
});
}
service.setProClie = function (pro_clie) {
service.pro_clie = pro_clie;
}
service.getProClie = function () {
return service.pro_clie;
}
Example: I run the code for the FIRST time. Everything goes fine.
When I get to THIS_LINE the field doesn't update.
I then run the code for the SECOND time and when I get to THIS_LINE the field updates with the value from the FIRST execution......
What am I doing wrong?!
I've even tried using $timeout and $evalASync but with no success...
Maybe your service caused this problem. Try to use $q and return promise from your service. Then use it like this
$scope.cercaClienteNomeCognome = function() {
if ($scope.nome == undefined){
var name = "";
} else name = angular.uppercase($scope.nome);
if ($scope.cognome == undefined){
var surname = "";
} else surname = angular.uppercase($scope.cognome);
var url = "servizi/getClienteNomeCognome?nomeCliente="+name+"&cognomeCliente="+surname;
esitoRicercaEstesa = TreeService.avviaRicercaEstesa(url);
if (esitoRicercaEstesa == "true") {
TreeService.getProClie().then(function (cercaSecondario) {
vm.cercaSecondario = cercaSecondario;
});
}
};
My bet would be that your remote call will make your code to be "out of angular context" so what happens is that by the time you get your response from your remote call angular won't know this and won't digest. So you either need to manually call $scope.$digest() after vm.cercaSecondario = TreeService.getProClie(); or you can wrap your remote call into $q.when(remoteCall).then(...). This way angular will digest by it's own.
Try like this:
TreeService.getProClie()
.then(function(res){
vm.cercaSecondario = res;
})
EDIT:
This to work you have to set your service to return promise.
.service('TreeService', function($q){
var data = this;
data.getProClie = function(){
var defer = $q.defer();
$http.get('example/url')
.success(function(res){
defer.resolve(res)
})
.error(function(error,status){
defer.reject(error);
})
return defer.promise;
};
})
write getProClie function in this way.
You need to promise chaining
service.getProClie = function () {
var defer = $q.defer();
defer.resolve(service.pro_clie);
return defer.promise;
}
Then in controller :
TreeService.getProClie().then(function(data){
vm.cercaSecondario = data
},
function(){
//error handling
});
I am implementing long polling to know the state of some long running event on the server side. I create my own factory that will notify me when a server event triggers. Here is the factory.
.factory("$httpPolling", function ($http) {
function $httpPolling($httpService) {
var _responseListener, _finishListener;
var cancelCall = false;
var _pollId;
function waitForServerCall(id) {
console.log("executing waitForServerCall");
$httpService.get(href("~/polling/" + id))
.success(function (response) {
var cancelPolling = _responseListener(response);
if (cancelPolling || cancelCall) {
return;
}
else {
waitForServerCall(id);
}
});
};
function _sendData(httpMethod, url) {
var pollingId = guid();
_pollId = pollingId;
if (url.split("?").length == 2) {
url += "&pollid=" + pollingId;
}
else {
url += "?pollid=" + pollingId;
}
if (httpMethod == 0) {
$httpService.get(url).success(function (response) {
if (_finishListener) {
_finishListener(response);
}
cancelCall = true;
});
}
else {
$httpService.post(url).success(function (response) {
if (_finishListener) {
_finishListener(response);
}
cancelCall = true;
});
}
}
var $self = this;
this.get = function (url) {
_sendData(0,url);
return $self;
};
this.post = function (url) {
_sendData(1, url);
return $self;
};
this.listen = function (_listener) {
_responseListener = _listener;
waitForServerCall(_pollId);
return $self;
}
this.finish = function (_finish) {
_finishListener = _finish;
return $self;
}
}
return new $httpPolling($http);
});
Where the sintax of usage should be:
$httpPolling.get("url")
.listen(function(event){
// fires when server event happend
})
.finish(function(response){
// fires when the long running process finish
});
The problem is that _sendData method does not execute asynchronously because the waitForServerCall only executes the ajax call when the _sendData(long running process) method get the response from the server.
Why? Is this an angular behavior?
Angular $httpProvider has an option provided for async http calls, which is set to false as default value.
Try
app.config(function ($httpProvider) {
$httpProvider.useApplyAsync(true);
});
I'm brand new to angular, so I'm probably doing things all wrong. My query is returning an array of objects like it should be. I then do a click event to test the post..it hits my web api just fine...but then it returns that same array from my get. I'm guessing this is cached? Why would my post show the results of my earlier get?
Edit - Sorry, I could have been more clear. When I run my saveTest method, a post fires and my array saves, however the 'result' variable of that save..is the array from my original get.
app.directive('referenceSection', function () {
return {
restrict: 'E',
templateUrl: '/app/loanapplication/views/reference-section.html',
controller: function ($scope, referenceService) {
$scope.json = angular.toJson($scope.referenceArray);
$scope.referenceArray = [];
referenceService.query().$promise.then(function (result) {
$scope.referenceArray = result;
}, function () {
alert("fail");
});
$scope.saveTest = function () {
referenceService.save(angular.toJson($scope.referenceArray)).$promise.then(function (result) {
var x = result;
}, function () {
alert("save fail");
});
}
}
};
});
Service
app.factory('referenceService', function ($resource) {
var requestUri = '/api/reference';
return $resource(requestUri)
});
Web api
public class ReferenceController : BaseController
{
public HttpResponseMessage Get()
{
List<WebReference> references = new List<WebReference>();
WebReference reference = new WebReference();
WebReference reference2 = new WebReference();
reference.Name = "Andrew";
reference.Relationship = "QuickSupport";
reference.Id = 1;
reference2.Name = "Josh";
reference2.Relationship = "Hansen";
reference2.Id = 2;
references.Add(reference);
references.Add(reference2);
if (references == null) throw new HttpResponseException(HttpStatusCode.NotFound);
return Request.CreateResponse<IEnumerable<WebReference>>(HttpStatusCode.OK, references);
}
public HttpResponseMessage Post([FromBody]WebReference[] references)
{
try
{
var msg = new HttpResponseMessage(HttpStatusCode.Created);
return msg;
}
catch (Exception e)
{
throw new HttpResponseException(HttpStatusCode.Conflict);
}
}
}
}
referenceService.query().$promise.then(function (result) {
$scope.referenceArray = result;
After this, you need to call $scope.$apply() to inform angular of your changes made to be bound. If I guessed your question correctly .
:-)
From where you are reading response? From x that is not available outside then function or it is mistake to not attach it to referenceArray
referenceService.save(angular.toJson($scope.referenceArray)).$promise
.then(function (result) {
var x = result;
}, function () {
alert("save fail");
});