$q.all promises inject data from first promise to second promise - angularjs

i would like to know if it's possible here with $q.all:
var promise1 = $http({
method: 'GET',
url: "https://cubber.zendesk.com/api/v2/organizations/"+id+"/users.json",
dataType: 'json',
headers: {'Content-Type': 'application/json',
'Authorization': 'Bearer '+token}
})
var promise2 = $http({
method: 'GET',
url: "https://cubber.zendesk.com/api/v2/users/"+idname+"/tickets/requested.json",
dataType: 'json',
headers: {'Content-Type': 'application/json',
'Authorization': 'Bearer '+token}
});
$q.all([promise1, promise2]).then(function(data){
console.log(data[0], data[1]);
});
If it's possible to retrieve data from promise 1 and inject into the url of promise 2 and then retrieve full data of both promises in the same array ?

For example like this
var responses = [];
$http({ ... }).then(function (response) {
responses.push(response);
return $http({ ... });
}).then(function (response) {
responses.push(response);
console.log(responses[0], responses[1]);
});
See also this answer, with many different ways to handle it.

Related

Can't access to Object in JSON from server response

I'm using following code to get the data from the server:
var deferred = $q.defer();
$http({
method: 'POST',
url: 'URL',
data: $.param({"KEY" : "VALUE"}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function(response){
deferred.resolve(response.data.data);
}, function(response){
});
return deferred.promise;
Returned value deferred.promise
Promise {$$state: Object}
$$state:Object
status:1
value:Object
server_time:XXXXXXXX
I tried it with deferred.promise.$$state but what i get is state: 0
Thanks for any suggestions

$q.all create dynamic promises with a loop in angularjs

I want to make a loop which englobe my second promise so every time it pass in my loop a new promise is create:
var promise1 = $http({
method: 'GET',
url: "https://cubber.zendesk.com/api/v2/organizations/"+id+"/users.json",
dataType: 'json',
headers: {'Content-Type': 'application/json',
'Authorization': 'Bearer '+token}
});
var promise2 = promise1.then(function(data) {
console.log(data);
for(i = 0; i < data.data.users.length; i++){
console.log(data.data.users.length);
var userid = data.data.users[i].id;
console.log(userid);
return $http({
method: 'GET',
url: "https://cubber.zendesk.com/api/v2/users/"+userid+"/tickets/requested.json",
dataType: 'json',
headers: {'Content-Type': 'application/json',
'Authorization': 'Bearer '+token}
})
}
});
$q.all([promise1, promise2]).then(function(data){
console.log(data[0].data.users, data[1]);
});
In this code, the loop is not working because promise2 only return one result.
Can you help me pls?
Think of your code more as a chain of events that you want to fire off. Forget synchronous - forget the line by line perspective.
In this case, we fire off the first http request. Then, in respone to the request, we fire off a bunch of userid http requests, and build up an array list of the returned promises.
Then using $q.all, we respond collectivley to all those promises, and do a console log.
var promise1 = $http({
method: 'GET',
url: "https://cubber.zendesk.com/api/v2/organizations/"+id+"/users.json",
dataType: 'json',
headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer '+token}
});
promise1.then(function(data) {
var allQ = [];
var allData = [];
console.log(data);
for(i = 0; i < data.data.users.length; i++){
console.log(data.data.users.length);
var userid = data.data.users[i].id;
console.log(userid);
allQ.push( $http({
method: 'GET',
url: "https://cubber.zendesk.com/api/v2/users/"+userid+"/tickets/requested.json",
dataType: 'json',
headers: {'Content-Type': 'application/json',
'Authorization': 'Bearer '+token}
}).then( function(data){ allData.push( data)} ) );
}
$q.all(allQ).then(function(data){
//You will probably want to iterate allData
console.log( allData);
});
});

$http POST response from service to controller

How to get the response from Service in below case??
Service:
app.factory('ajaxService', function($http) {
updateTodoDetail: function(postDetail){
$http({
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: post_url,
data: $.param({detail: postDetail})
})
.success(function(response){
//return response;
});
}
})
Controller:
updated_details = 'xyz';
ajaxService.updateTodoDetail(updated_details);
In th above case, i POST the data through Controller and it was working fine but now i want the response to come in my Controller.
How to achive that??
$http returns a promise:
Return the promise
updateTodoDetail: function(postDetail){
return $http({
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: post_url,
data: $.param({detail: postDetail})
});
So you can do
ajaxService.updateTodoDetail(updated_details).success(function(result) {
$scope.result = result //or whatever else.
}
Alternatively you can pass the successfunction into updateTodoDetail:
updateTodoDetail: function(postDetail, callback){
$http({
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: post_url,
data: $.param({detail: postDetail})
})
.success(callback);
So your controller has
ajaxService.updateTodoDetail(updated_details, function(result) {
$scope.result = result //or whatever else.
})
I would prefer the first option so I could handle errors etc as well without passing in those functions too.
(NB: I haven't tested the code above so it might require some modification)
what I usually do is like this
app.factory('call', ['$http', function($http) {
//this is the key, as you can see I put the 'callBackFunc' as parameter
function postOrder(dataArray,callBackFunc) {
$http({
method: 'POST',
url: 'example.com',
data: dataArray
}).
success(function(data) {
//this is the key
callBackFunc(data);
}).
error(function(data, response) {
console.log(response + " " + data);
});
}
return {
postOrder:postOrder
}
}]);
then in my controller I just call this
$scope.postOrder = function() {
call.getOrder($scope.data, function(data) {
console.log(data);
}
}
do not forget to insert the dependency injection of 'call' services into your controller

AngularJS not binding promise to template

My service:
This was mistake 1 of 2 cause of my error:
getAll: function(url) {
deferred.resolve($http({ <--- deferred.resolve should not have been here
method: 'GET',
url: url,
contentType: "application/json; charset=utf-8",
cache: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}));
return deferred.promise;
},
Should have been instead:
getAll: function (url) {
$http({
method: 'GET',
url: url,
contentType: "application/json; charset=utf-8",
cache: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
My controller:
This was mistake 2 of 2 cause of my error:
// $scope.PassengerVehicles = crudSvc.getAll('/_json/PassengerVehicles.js');
// should have been:
crudSvc.getAll('/_json/PassengerVehicles.js').then(function (data) {
$scope.PassengerVehicles = data;
});
My template:
<ul data-ng-repeat="passVeh in PassengerVehicles">
<li>{{passVeh.itemId}}</li>
</ul>
Here is my plunker, which has been corrected:
AngularJS not binding promise to template
Than You Fourth!!
You have the getAll() function immediatly resolving and returning a promise to the controller. You need to allow the getAll() function to execute and deal with the promise when that resolves:
getAll: function(url) {
return $http({
method: 'GET',
url: url,
contentType: "application/json; charset=utf-8",
cache: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
},
and in the controller:
crudSvc.getAll('/_json/PassengerVehicles.js').success(function (vehicles){
$scope.PassengerVehicles = vehicles;
});
The difference is that you are returning a promise that immediately resolves and returns another promise. You only need to resolve the http promise.

how to change post['Content-Type'] in angularjs

i want to change post['Content-Type'] in angularjs so i use
app.config(function($locationProvider,$httpProvider) {
$locationProvider.html5Mode(false);
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});
and the event is
$http.post("http://172.22.71.107:8888/ajax/login",{admin_name:user.u_name,admin_password:user.cert})
.success(function(arg_result){
console.log(arg_result);
});
};
however the rusult is
Parametersapplication/x-www-form-urlencoded
{"admin_name":"dd"}
what i want is
Parametersapplication/x-www-form-urlencoded
admin_name dd
so what i should do?
Try like:
var serializedData = $.param({admin_name:user.u_name,admin_password:user.cert});
$http({
method: 'POST',
url: 'http://172.22.71.107:8888/ajax/login',
data: serializedData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}}).then(function(result) {
console.log(result);
}, function(error) {
console.log(error);
});
angular.module('myApp', [])
.config(function ($httpProvider) {
$httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
})
OP is using Content-Type : application/x-www-form-urlencoded so you need to use $httpParamSerializerJQLike to change post data from JSON to string
note: there is no data property but is params property
$http({
method: 'POST',
url: 'whatever URL',
params: credentials,
paramSerializer: '$httpParamSerializerJQLike',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
Additionally, you can inject the serializer and use it explicitly with data property
.controller(function($http, $httpParamSerializerJQLike) {
....
$http({
url: myUrl,
method: 'POST',
data: $httpParamSerializerJQLike(myData),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
Have a look at this:
How can I post data as form data instead of a request payload?
Alternatively, you could do the following:
$http.post('file.php',{
'val': val
}).success(function(data){
console.log(data);
});
PHP
$post = json_decode(file_get_contents('php://input'));
$val = print_r($post->val,true);

Resources