How to implement ajax call using promise with angular? - javascript

I'm trying to use angular promise using $q that is wrapped in 'service' and call it from my controller.
Here is the code:
var myController = function ($scope, myService) {
$scope.doSomething = function (c, $event) {
$event.preventDefault();
myService.method1(c).then(function (rslt) {
alert(rslt);
}, function (err) {
alert(err);
}).then(function () {
//clean up
});
};
};
var myApp = angular.module('myApp', [])
.factory('myService', function($q) {
function _method1(c) {
var dfr = $q.defer();
var dt = { sc: c };
$.ajax({
type: "POST",
url: "mypage.aspx/mymethod",
data: JSON.stringify(dt),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
dfr.resolve('actions sucess');
},
error: function (msg) {
dfr.reject(msg);
}
});
return dfr.promise;
}
return { method1: _method1 };
}).controller('myController', myController);
The problem is that ' alert(rslt);' piece of code is never executed.
Service is called and data is updated but first 'then' function is not reached on first click.
What am I doing wrong?
Any help appreciated.

I would recoomend you to use $http and $resource instead of $.ajax
Heres an example of $http
myApp.factory('MyService',
[
'$http',
'$q',
'$resource',
function (
$http,
$q,
$resource
) {
return {
doSomething : function (somedata) {
var deferred = $q.defer();
$http({ method: 'POST', url: '"mypage.aspx/mymethod"', data: somedata }).
success(function (data, status, headers, config) {
deferred.resolve(true);
}).
error(function (data, status, headers, config) {
deferred.resolve(false);
});
return deferred.promise;
}
};
}]);

Just add the dependency to $rootScope and call $rootScope.$apply() in both callbacks from $.ajax():
success: function () {
dfr.resolve('actions sucess');
$rootScope.$apply();
}, ...
But better yet, use Angular's $http service.

Related

How to get promise result using AngularJS

The following is the controller used to retrieve information from sharepoint. I can see debugging that the entry data.d.UserProfileProperties.results[115].Value has a property value that I need to render in view. How can I get that value from the result promise?
(function() {
'use strict'
var createPurchasingCardController = function($scope, $rootScope, $filter, $window, $location, $timeout, requestService) {
$scope.actionTitle = "";
$scope.counter = [];
var getCurrentUserData = function () {
var dfd = new $.Deferred();
var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";
$.ajax({
url: queryUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: onSuccess,
error: onError,
cache: false
});
function onSuccess(data) {
dfd.resolve(data);
}
function onError(data, errorCode, errorMessage) {
dfd.reject(errorMessage);
}
return dfd.promise();
}
var _init = function () {
$scope.counter = getCurrentUserData();
console.log($scope.counter);
}
_init();
}
angular.module('myApp').controller('createPurchasingCardController', ['$scope', '$rootScope', '$filter', '$window', '$location', '$timeout', 'requestService', createPurchasingCardController]);
}());
I have tried to get it into the counter but it is not showing up. Any help would be appreciated.
Instead of using jQuery .ajax, use the $http service:
function getCurrentUserData() {
var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";
var promise = $http({
url: queryUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
cache: false
}).then(function(response) {
return response.data;
}).catch(function(response) {
console.log("ERROR", response);
throw response;
});
return promise;
}
Then extract the data from the returned promise:
function _init() {
var promise = getCurrentUserData();
promise.then(function(data) {
$scope.counter = data;
console.log($scope.counter);
});
}
_init();
The promises returned by the $http service are integrated with the AngularJS framework. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.
For more information, see
AngularJS $http Service API Reference
assign your response object to $scope object
function onSuccess(data) {
$scope.promiseData = data
dfd.resolve(data);
}

service does not return data to controller in angular

Here is my service:
app.service('trackService', ['$http', function($http) {
var data;
this.topTracks = function(limit) {
$http({
method: 'GET',
url: 'http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks',
params: {api_key: 'e8452c5962aafbb3e87c66e4aaaf5cbf', format: 'json', limit: limit}
}).success(function(result) {
this.data = result.tracks; console.log(this.data); return this.data;
});
}
}]);
and controller -
app.controller('artistSongsCtrl', ['$scope', 'trackService', function($scope, trackService) {
$scope.data = trackService.topTracks(10);
//console.log($scope.data);
}]);
how to send data to the controlller using a $http service inside a custom service?
Several problems are $http is asynchronous and your service method topTracks() doesn't return anything. Also you can't return inside success, there is nowhere to return to ... use then() instead
You need to return the promise from service and set the scope in a promise callback in controller
app.service('trackService', ['$http',
function($http) {
var data;
var self = this;
this.topTracks = function(limit) {
return $http({
method: 'GET',
url: 'http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks',
params: {
api_key: 'e8452c5962aafbb3e87c66e4aaaf5cbf',
format: 'json',
limit: limit
}
}).then(function(result) {
self.data = result.data.tracks;
console.log(self.data);
return self.data;
});
}
}
]);
app.controller('artistSongsCtrl', ['$scope', 'trackService',
function($scope, trackService) {
trackService.topTracks(10).then(function(data) {
$scope.data = data;
//console.log($scope.data);
});
}
]);
Inside your service you are making an asynchronous GET request. In order to let the controller catch that response, you need to return a promise. Here's an example using $q:
app.service('trackService', ['$http', '$q', function($http, $q) {
var data;
this.topTracks = function(limit) {
var d = $q.defer();
$http({
method: 'GET',
url: 'http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks',
params: {api_key: 'e8452c5962aafbb3e87c66e4aaaf5cbf', format: 'json', limit: limit}
}).success(function(result) {
this.data = result.tracks;
console.log(this.data);
d.resolve(this.data);
});
return d.promise;
}
}]);

AngularJS: Get $http response from function in module

how do i get the response from $http in from a function in a module?
Angular module:
// module customServices
var customServices = angular.module("customServices", []);
// object for response
httpResponse = {content:null};
// function sendRequest
function sendRequest(param)
{
// inject $http
var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');
// set header
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$http({
// config
method: 'POST',
url: 'response.php',
data: $.param(param),
// success
}).success(function (response, status, headers, config) {
httpResponse.content = response;
// error
}).error(function (response, status, headers, config) {
console.warn("error");
});
}
// factory - moduleService
customServices.factory("moduleService", function () {
return {
// function - members
members: function(param)
{
switch(param.fc)
{
// getAll
case 'getAll':
sendRequest({
service :'members',
fc : param.fc,
id : param.id
});
return httpResponse;
}
},
};
});
Controller:
myApp.controller('main', ['$scope', '$http', 'moduleService', function($scope, $http, moduleService){
$scope.handleClick = function () {
var ReturnValue = moduleService.members({
fc:'getAll',
id:'123',
});
console.log(ReturnValue);
};
}]);
the object is on the first click empty and on the second click its content is the $http response.
but i want that the controller knows when the $http response is available.
i tried to use $broadcast and $on, but it seems to be impossible to use $rootScope in my function "sendRequest".
A couple of things:
Why are you defining the httpResponse instead of just returning something from the sendRequest function?
Why are you defining a function outside angular instead of putting it as a service or factory?
You should create a service with the sendRequest method inside like this:
customServices.factory("yourNameHere", function($http, $q) {
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
return {
sendRequest: function sendRequest(param) {
return $http({
method: 'POST',
url: 'response.php',
data: $.param(param),
})
.then(function(response) {
return response;
})
.catch(function(response) {
console.warn("error");
return $q.reject(response);
});
}
};
});
Then in the other service:
customServices.factory("moduleService", function (yourNameHere) {
return {
// function - members
members: function(param)
{
switch(param.fc)
{
// getAll
case 'getAll':
return yourNameHere.sendRequest({
service :'members',
fc : param.fc,
id : param.id
});
}
},
};
});
Now the result will be a promise, so you can consume the data like this:
moduleService.members({
fc:'getAll',
id:'123',
})
.then(function(result) {
console.log(result);
});

$http post via an angularjs service

I use the code below. The content of dataService is all the $http possible in my application. In the controller, I consume this function. The function call a Web Api service, this one is called and return the right response. In the function customerToggleSuccess the data is undefined. I don't understand why.
(function () {
angular.module('myApp')
.factory('dataService', ['$q', '$http']);
function dataService($q, $http,) {
return {
customerToggleActive: customerToggleActive
};
function customerToggleActive(customerId, index) {
var customer = {
"id": customerId,
"index": index
};
return $http({
method: 'POST',
url: 'api/customer/validtoggle/',
headers: {
},
transformResponse: function (data, headers) {
},
data: customer
})
.then(customerToggleData)
.catch(customerToggleError)
}
function customerToggleData(response) {
return response.data;
}
function customerToggleError(response) {
}
}
}());
(function () {
angular.module('myApp')
.controller('customerController', ['$scope', 'dataService', '$http', '$log', CustomerController]);
function CustomerController($scope, dataService, $http, , $log) {
var vm = this;
vm.activeToggle = function (customerId, index) {
dataService.customerToggleActive(customerId, index)
.then(customerToggleSuccess)
.catch(customerToggleCatch)
.finally(customerToggleComplete);
function customerToggleSuccess(data) {
$log.info(data);
}
function customerToggleCatch(errorMsg) {
}
function customerToggleComplete() {
}
}
}
}());
Like this ,
(function () {
angular.module('myApp')
.factory('dataService', ['$q', '$http']);
function dataService($q, $http,) {
return {
customerToggleActive: customerToggleActive
};
function customerToggleActive(customerId, index) {
var customer = {
"id": customerId,
"index": index
};
return $http({
method: 'POST',
url: 'api/customer/validtoggle/',
headers: {
},
transformResponse: function (data, headers) {
},
data: customer
})
}
}
}());
Simply return the $http promise,
return $http({
method: 'POST',
url: 'api/customer/validtoggle/',
headers: {
},
transformResponse: function (data, headers) {
},
data: customer
})
you can access it by,
dataService.customerToggleActive(customerId, index)
.then(function (response) {
// do your stuff
})
or, you can do,
function dataService($q, $http,) {
var defer = $q.defer();
....
....
$http({
method: 'POST',
url: 'api/customer/validtoggle/',
headers: {
},
transformResponse: function (data, headers) {
},
data: customer
})
function customerToggleData(response) {
defer.resolve (response.data);
}
function customerToggleError(response) {
defer.reject(response);
}
return defer.promise;
}

how to convert AJAX $http call to Angular.JS

For a functionality that I need, I found a really nice AJAX example. Basically it calls the Yahoo API. But I'm working with Angular.JS. So I have no clue how to convert that. Any help?
That's the AJAX function (details see this posting and this JsFiddle):
$.ajax({
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'YAHOO.Finance.SymbolSuggest.ssCallback',
data:{
query: request.term
},
url: 'http://autoc.finance.yahoo.com/autoc',
success: function (data) {
alert("yes");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
So what I'm looking for, is how to convert the code above into somewhat like this. The sample should just print the return value. See this JsFiddle. Especially, I have not idea what to do with the jsonpCallback parameter. That's what I could not find in any other example.
<div ng-app='MyModule' ng-controller='DefaultCtrl'>
{{ test() }}
</div>
JavaScript
function DefaultCtrl($scope, myService) {
$scope.test = myService.test;
}
angular.module('MyModule', [])
.factory('myService', function () {
return {
test: function () {
$http.get("?????")
.success(function(data, status, headers, config) {
return data;
})
.error(function(data, status, headers, config) {
return "there was an error";
})
}
}
});
The intermediate solution - after all your help - looks like this. Thanks. I had to install a Chrome extension which allows cross-domain calls as long as you use the updated JsFiddle. I changed the way I'm passing the parameters to the http-get call and I also included the $q (promise) handling. The result contains a valid list from Yahoo YQL API. Just need to handle that array then.
function DefaultCtrl($log, $scope, $http, myService) {
var promise = myService.getSuggestions('yahoo');
promise.then(
function(payload) {
$scope.test = payload;
$log.info('received data', payload);
},
function(errorPayload) {
$log.error('failure loading suggestions', errorPayload);
});
}
angular.module('MyModule', [])
.factory('myService', function ($http, $log, $q) {
return {
getSuggestions: function (symbol) {
var deferred = $q.defer();
$http.get('http://d.yimg.com/autoc.finance.yahoo.com/autoc', {
cache: true,
params: {
query: symbol,
callback: 'YAHOO.Finance.SymbolSuggest.ssCallback'
}
})
.success(function(data) {
deferred.resolve(data);
})
.error(function(msg, code) {
deferred.reject(msg);
$log.error(msg, code);
});
return deferred.promise;
}
}
});
just have a look at the docs
https://docs.angularjs.org/api/ng/service/$http
$http.get('http://autoc.finance.yahoo.com/autoc',
{dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'YAHOO.Finance.SymbolSuggest.ssCallback'}).success(function(data){ alert("yes"); });
Use Ajax call and you have to use promise
And use only test not {{test()}}
Because in your controller when you call your factory ajax function then in controller you get undefined response.
So use promise.
Service:
var demoService = angular.module('demoService', [])
.service('myService',['$http', function($http) {
this.getdata = function(entity){
var promise = $http({
method : 'GET',
url : 'services/entity/add',
data : entity,
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'YAHOO.Finance.SymbolSuggest.ssCallback',
headers : {
'Content-Type' : 'application/json'
},
cache : false
}).then(function (response) {
return response;
});
return promise;
};
}]);
Controller :
var demoService = angular.module('demoService', [])
.controller('myctr',['$scope','myService',function($scope,myService){
myService.getdata().then(function(response){
//Success
},function(response){
//Error
});
}]);
now you can see your json in controller success

Categories