Call rest webservice and assign value to variable in Angularjs - angularjs

I have defined a function in my controller which calls a rest web-service in AngularJs. I need to assign the value returned by the function to a variable. The function may be called many times with different parameters and assign the value returned to different variables.
The function in my controller takes a parameter, which in turn is then passed to the web-service.
function disableBlockFn(blocKName) {
var data = {
formId: vm.formId,
blockId: blocKName,
statusId: vm.statusId,
roleId: vm.roleId
}
roleService.displayBlock(data).then(function (data) {
return data[0];
});
}
When i assign the value of the aboved function to a variable and print it on the console, i get 'Undefined'.
vm.pilot = vm.disableBlockFn('pilot_mpr_qualite_1');
console.log('pilot ', vm.pilot);
vm.pilot_ang = vm.disableBlockFn('pilot_mpr_qualite_ang');
console.log('pilot ', vm.pilot_ang);
Function to request WS
function displayBlock(objBlock) {
var defer = $q.defer();
$http({
method: 'GET',
url: config.urlPath + 'api/block/block'
}).then(function (data) {
var results = data;
defer.resolve(results.data.data);
}, function (data, status) {
defer.reject({
data: data,
status: status
});
});
return defer.promise;
}

You need to return a promise from disableBlockFn. If your function is in your controller, you can set the value directly.
function disableBlockFn(blocKName) {
var data = {
formId: vm.formId,
blockId: blocKName,
statusId: vm.statusId,
roleId: vm.roleId
}
//here you can return only your promise
return roleService.displayBlock(data);
}
And then, resolve the promise in your controller:
vm.disableBlockFn('pilot_mpr_qualite_1').then(function(data) {
vm.pilot = data;
console.log('pilot ', vm.pilot);
});
EDITED:
If your function is in your controller you can do this:
function disableBlockFn(blocKName) {
var data = {
formId: vm.formId,
blockId: blocKName,
statusId: vm.statusId,
roleId: vm.roleId
}
return roleService.displayBlock(data)
.then(function(data){
vm.pilot = data[0];
});
}

Related

$q.all() returns an array of undefined values

I have 3 functions that request data from backend. Following is the code in the controller.js file
$scope.getList1 = = function () {
service.getList1(constants.getUrl1).then(
function success(data) {
$scope.list1 = data.data.list1;
return data;
}, function error() {
});
};
$scope.getList2 = = function () {
service.getList2(constants.getUrl2).then(
function success(data) {
$scope.list2 = data.data.list2;
return data;
}, function error() {
});
};
$scope.getList3 = = function () {
service.getList3(constants.getUrl3).then(
function success(data) {
$scope.list3 = data.data.list3;
return data;
}, function error() {
});
};
And in my service.js file, I have $http requests to fetch the data from the server. Following is my code in the service.js
this.getList1 = function (getUrl1) {
return $http({
method: 'GET',
url: getUrl1
});
};
this.getList2 = function (getUrl2) {
return $http({
method: 'GET',
url: getUrl2
});
};
this.getList3 = function (getUrl3) {
return $http({
method: 'GET',
url: getUrl3
});
};
then I in a separate function I have called like below
$scope.initialise = function () {
var requestArray = [$scope.getList1(), $scope.getList2(), $scope.getList3()];
$q.all(requestArray).then(function (response) {
console.log(response);
//other logic after successful completion of all 3 requests
});
};
But in the response, I get an array of 3 'undefined' values
e.g [undefined, undefined, undefined]
What am I doing wrong here. Any suggestions ?.
Thanks.
Add return statement in functions in your $scope.
$scope.getList1 = = function () {
/** here-> */ return service.getList1(constants.getUrl1).then(
function success(data) {
$scope.list1 = data.data.list1;
return data;
}, function error() {
});
};
And so on.
Issue is that your functions in service are returning promises, but functions in scope are not returning anything.

Ionic angular service only return data after controller call

I have a service that do two $http.get to get data from two source and concat into an array and return it to controller.
angular.module('starter.controllers').factory('GetDataList', function ($http) {
var arrDataList = [];
var postData1 = {
"param": "1"
};
var postData2 = {
"param": "2"
};
$http({
method: 'GET',
url: 'https://localhost/search',
data: postData1
})
.then(function (items) {
debugger
arrDataList = arrDataList.concat(items.data.list);
});
$http({
method: 'GET',
url: 'https://localhost/locate',
data: postData2
})
.then(function (items) {
debugger
arrDataList = arrDataList.concat(items.data.list);
});
return {
getAPIData: function () {
debugger
return arrDataList;
}
};
});
In my controller, I call it like this:
$scope.GetList = function () {
debugger
$scope.item = GetDataList.getAPIData();
$scope.$broadcast('scroll.infiniteScrollComplete');
}
When I use the debugger in console, I notice that
1) getAPIData() will be called first but it has data in it
2) Next debugger triggered at the controller which GetDataList.getAPIData(); does not return any data for $scope.Item
3) The last debugger reach $http call which return the data correctly as I observed in the console. But it never reach the controller side afterwards so no data is being displayed in the mobile app
I read about the natural behavior of angular async call so this seems to be normal. But in my case, what should I do to ensure that the data could reach the controller?
Many thanks
To achieve that without loosing performance, you should use $q.all(), so it will keep your request async and it will return the data once all the promises are resolved. Don't try a synchronic approach because that will reduce your performance.
You can use it like this:
Your factory:
app.factory('GetDataList', function($q, $http) {
var promises = [];
var arrDataList = [];
var requests = [{
url: 'https://localhost/search',
postData: {
"param": "1"
}
}, {
url: 'https://localhost/locate',
postData: {
"param": "2"
}
}];
angular.forEach(requests, function(req) {
executeRequest(req);
})
function resolveData(data) {
debugger
if (arrDataList.length === 0) {
arrDataList = data.data;
} else {
arrDataList = arrDataList.concat(data.data);
}
}
function executeRequest(req) {
var promise = $http({
url: req.url,
method: 'GET',
data: req.postData
})
.then(resolveData);
promises.push(promise)
}
return {
getAPIData: function() {
debugger
return $q.all(promises).then(function() {
return arrDataList
});
}
}
});
And your controller:
$scope.GetList = function() {
debugger
GetDataList.getAPIData().then(function(item) {
$scope.item = item
});
$scope.$broadcast('scroll.infiniteScrollComplete');
}
What we are doing here is executing each request inside the requests array (using its url and postData) asynchronously and saving the promises inside an array. When getApiData is called, it returns a function that will be called after $q.all(promises), that means it will return the data after all those promises are finished (the promises ask if the arrDataList is empty and concats the new data if it's not).
This way you get to keep your async calls! And inside the controller you receive a promise instead of the data itself.
You should make it to be synchronized as in the below
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,serviceDemo) {
$scope.name = 'World';
});
app.factory('serviceDemo', function ($http) {
var arrDataList = [];
var postData1 = []; var postData2 =[]
var firstMethod=function(){
$http({
method: 'GET',
url: 'a.json'
})
.then(function (response) {
console.log(response);
postData1=response.data;
arrDataList.push(postData1);
// console.log(postData1);
secondMethod(); //put the second method call here
});
}
var secondMethod=function(){
$http({
method: 'GET',
url: 'b.json'
})
.then(function (response) {
postData2=response.data;
arrDataList.push(postData2);
console.log(arrDataList);
});
}
var getAPIData= function () {
firstMethod();
return arrDataList;
}
return {
getAPIData: getAPIData
};
});
Modification Made:
You need to call the second method inside the success block of your first method. By this way your first method gets executed, when the result is fetched your second method gets executed and then only control will come out of the first method block.
LIVE DEMO

GET call to REST API returns null

I am trying to make a GET call to test a REST API but it keeps returning null, is there anything I am doing wrong:
Making the call in controller.js
function ConsumerSearchCtrl($scope, BusinessCategoryService) {
console.log(BusinessCategoryService);
}
127.0.0.1:8000/api/category/ works perfectly fine
Code in services.js for API
/**
*
*/
function BusinessCategoryService(WenzeyAPI, $q) {
var scope = this;
scope.categories = categories;
function categories() {
var q = $q.defer();
WenzeyAPI.get('http://127.0.0.1:8000/api/category/').then(function success (res) {
q.resolve(res.data);
}, function failure (err) {
q.reject(err);
})
return q.promise;
}
}
/**
*
*/
function WenzeyAPI() {
var scope = this,
ip = "http://127.0.0.1:8000";
scope.get = get;
scope.post = post;
function get(url, data) {
data = data || {};
var req = {
method: 'GET',
url: url,
data: data
}
var q = $q.defer();
$http(req).then(function success(response) {
q.resolve(response);
}, function failure(err) {
q.reject(err);
});
return q.promise;
}
function post(url, data) {
data = data || {};
var req = {
method: 'POST',
url: url,
data: data
}
var q = $q.defer();
$http(req).then(function success(response) {
q.resolve(response);
}, function failure(err) {
q.reject(err);
});
return q.promise;
}
}
Removing WenzeyAPI and using $http resolved it.
function BusinessCategoryService($http) {
this.getAllData = function () {
return $http({
method: 'GET',
url: 'http://127.0.0.1:8000/api/category/',
});
}
}

Angular JS. Refresh a list after promise completes

I have a model that I am using to hold my data in angular:
var FuelProcessingModel = function (carrierService) {
this.myArray = [];
};
That model has an array of MyObjects that I get from the DB:
var MyObject = function () {
//stuff
}
I update this using a REST call:
$scope.add = function () {
var myObject = new MyObject();
$scope.model.MyObjects.push(myObject);
service.add(myObject);
};
Which I use a service to hit the Server:
this.add = function (myObject) {
$http({
method: "POST",
url: "theServer",
data: myObject
});
}
The REST service just adds to the database, It doesn't return anything.
I need to reload the data from the database after the update is finished, so that my records now have all newly associated ID's and pertinent data.
I cannot just do:
window.location.reload();
The user starts by selecting a value from a drop down list to decide which list of data they start off seeing. I cannot / do not want to pass the value to it, mainly because it is in its own partial view, with its own controller, because it is used on many pages.
I tried doing:
$scope.add = function () {
//same as above
//this
service.get().then(function(result) { $scope.model.myArray = result.data; });
};
Obviously the problem here is the promise isn't complete before the DOM reloads the page. So the user saw themself add an item to the array and it vanished.
Do I want to load the page after the promise is complete? (How would I do that?)
should I return the updated data from the REST service and reset the current value? (seems like the same promise issue)
Is there a better practice that I do not know about?
UPDATE
For Bergi:
this.get = function (key) {
return $http({
method: "GET",
url: "theServer" + key
})
.success(function (data) {
return data;
});
}
I think you want to chain your two promises:
$scope.add = function () {
var myObject = new MyObject();
$scope.model.MyObjects.push(myObject);
return service.add(myObject).then(function() {
return service.get();
}).then(function(result) {
$scope.model.myArray = result.data;
});
};
and
this.add = function(myObject) {
return $http({
// ^^^^^^ return a promise here
method: "POST",
url: "theServer",
data: myObject
});
};
You can wrap your service call in a deferred promise, and on return success re-init your data from the controller..
$scope.add = function () {
var myObject = new MyObject();
$scope.model.MyObjects.push(myObject);
service.add(myObject).then(function (response) {
// here's where you'd do whatever you want to refresh your model
}),
function (err) {console.log(err);};
};
And the service:
this.add = function (myObject) {
var deferred = $q.defer();
$http({
method: "POST",
url: "theServer",
data: myObject,
success: function (response) {
deferred.resolve(err);
},
error: function (err) {
deferred.reject(err);
}
});
return deferred.promise;
}

After I call a service my view does not get updated in AngularJS

I have the following service:
angular.module('adminApp')
.factory('subjectService', function ($http) {
return {
get: function (testAccountId) {
return $http({
method: 'GET',
url: '/api/Subjects/GetSelect',
params: { testAccountId: testAccountId }
});
}
}
});
The following code works when I call http directly but now when I use the service:
$scope.$watch('selectedTestAccount', function () {
if ($scope.selectedTestAccount != null) {
$scope.myData = null;
$http({
method: 'GET',
url: '/api/Subjects/GetSelect',
params: { testAccountId: $scope.selectedTestAccount }
}).success(function (result) {
$scope.subjects = result;
$scope.myData = null;
});
//subjectService.get($scope.selectedTestAccount)
// .then(function (result) {
// $scope.subjects = result;
// $scope.myData = null;
// alert($scope.subjects);
// }, function (result) {
// alert("Error: No data returned");
// });
}
});
Related to this question. Is this the correct way to call the service. I saw another suggestion that looked like the following and used promises. Should I be doing this:
services.factory('MultiRecipeLoader', ['Recipe', '$q',
function(Recipe, $q) {
return function() {
var delay = $q.defer();
Recipe.query(function(recipes) {
delay.resolve(recipes);
}, function() {
delay.reject('Unable to fetch recipes');
});
return delay.promise;
};
}]);
I tried to reproduce your exemple in a plunker. Let me know if it is what you are look for:
http://plnkr.co/edit/6s5utccjgHTnrrokM1u8?p=preview
In this demo, there is a dropdown that changes the value of the account variable that is $watched in the controller. If the account value changes, it calls the SubjectsServices and updates the unordered list with the names of the subjects. As an addition, there is also a dropdown filled with the same values.
If the only way to change the value is through the dropdown, maybe you can only use the ng-change directive on the select to call an update function that will do the same work.
$scope.update = function() {
SubjectService.get($scope.account).then(function(result) {
$scope.subjects = result.data;
}, function(result) {
// error handling...
});
};
<select ng-change="update()"></select>
The object received in parameter from the method then on an $http promise has a data property containing the requested data.
$http.get(...).then(function(result) {
var subjects = result.data;
});

Resources