We Keep Coding

In angular function not waiting to complete first function execution

my function didnt wait to complete earlier function execution and it is completing.
I have my code is that i am doing some thing wrong:
$scope.abc1 = function(){
var arrayJson = [{'name':'max','age':'12'},{'name':'tax','age':'16'}]
for(var i=0; i<arratJson.length;i++){
var getAddress = $scope.xyz(arratJson[i].name);
}
$scope.createBody();
};
$scope.createBody = function(){
//some more code here
};
$scope.xyz = function(name){
$http({
method: 'GET',
url: 'rest/address',
type:'json',
headers:{'action':'single','name':name},
}).success(function(response){
return response;
}).error(function(response){
});
};
so in this it is not waiting to get address instead of it moving down so how to wait finishing for loop and then call different function.
createBody function called before the $scope.xyz() function returns the value how to wait until loop finishes

This is expected due to asynchronous nature of execution. You should use callbacks to avoid this problem.

You should use the $q service.
first store all $http calls in an array and with $q.all(array) you create a promise that is resolved after all $http promises have resolved.
e.g:
$scope.abc1 = function(){
var arrayJson = [{'name':'max','age':'12'},{'name':'tax','age':'16'}]
var promises = [];
for(var i=0; i<arratJson.length;i++){
promises.push($scope.xyz(arratJson[i].name));
}
$q.all(promises).then($scope.createBody);
};
And on the resolve of this new promise you can call your createBody function.
For this to work You should also change success callback on the $scope.xyz to a then callback and return the promise.
e.g:
$scope.xyz = function(name){
return $http({
method: 'GET',
url: 'rest/address',
type:'json',
headers:{'action':'single','name':name},
}).then(function(response){
return response;
})["catch"](function(response){
});
};
UPDATE
If you don't care if all calls succeed, replace:
$q.all(promises).then($scope.createBody);
With:
$q.all(promises)["finally"]($scope.createBody);
PS: Keep in mind that in the finally callback you don't get the return values of every call, whereas in the then an array will be passed as argument in the callback function which holds in every position a return value of each $http call.

There are two way to achieve this
1)Use async:false
2)Need to use callback
choose your way and enjoy!

You should how promises works in javascript.
$http is an asynchronous function. You must return $http result in $scope.xyz function and use then, success, error function callbacks.
Example:
function xyz() {
return $http(...);
}
xyz().then(function(data) {
address = data.data.address; // in your json dto format
})
more info https://docs.angularjs.org/api/ng/service/$http
hope this helps!
regards

You can use Angular promises.
Include promise status to self created object with deferred value, that has valueOf and toString methods. Last two methods allow to use arithmetic, string and comparison operators.
Object with deferred value:
var DeferredValue = function(initial){
var self = this;
self._value = initial;
var deferred = $q.defer();
self.$promise = deferred.promise;
self.$resolved = false;
self.$resolve = function(value){
deferred.resolve(value);
}
self.$promise.then(function(v){
self._value = v;
deferred = null;
self.$resolved = true;
delete self.$resolve;
return self.$promise;
});
}
DeferredValue.prototype = {
constructor: DeferredValue,
valueOf: function(){
return this._value
},
toString: function(){
return this._value.toString()
}
}
Return this object in your ASYNC function, and resolve them after retrieving data:
var getValue = function(){
var value = new DeferredValue();
$timeout(function(){
value.$resolve(Math.floor(Math.random() * 10))
},1500);
return value;
}
Plunker example

got puzzled about promise in jQuery

1 the value can not change in promise
for example
var t = function(s) {
var wait = function(dtd) {　　　　
var dtd = $.Deferred();
//new a Deferred object in function
　　　　
var tasks = function() {　　　　　　
alert("complete!");
s = s + "hhh";　　　　　　
dtd.resolve(s); // change the state of deferred object　　　　　　
};　　　　　　
setTimeout(tasks, 5000);
// return promise object
return dtd.promise(s);
};
}
var s = "hhh";
$.when(t(s))
.then(function() {
alert(s);
}).then(function() {
alert(s);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
I can only got "hhh" instead of "hhhhhh"...
2
How to invoke promise chain with different values?like a.then(b(c)).then(f(d))
I put all values in a object and then pass it on chain...

The alert in your $.when is alerting the global variable not the resolve in tasks
Also , you never call wait() and tasks() doesn't return anything.
The return of the promise only returns to wait() which never gets called. Returning to the inner function does not return to the outer function
Also you have no arguments in then() to receive the resolved data.
In order to get data to the second then, you need to return something from the first one
var t = function (s) {
var wait = function () {　　　　
var dtd = $.Deferred();
//new a Deferred object in function
　　　　
var tasks = function () {　　　　　　
alert("complete!");
s = s + "hhh";　　　　　　
dtd.resolve(s); // change the state of deferred object　　　　　　
};　　　　　　
setTimeout(tasks, 2000);
// return promise object
return dtd.promise();
};
// return the promise inside `wait`
return wait()
}
var s = "hhh";
$.when(t(s)).then(function (resolvedData) {
// return to the next then...just because we can
return resolvedData; // must return something if want to access it in next then
}).then(function(previousThenData) {
alert(previousThenData);// alert argument
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

How to use $q.deffer to chain ajax requests?

I need to do this: browser have to make N requests to the server, requests mustn't be async, next requests are starting after previous requests will stop.
I can write some function A with for i < N i++ and calling this function A again recursively to do this, but it is not beautifull at all. Also, this called callback hell. I want some more beautifull solution.
I found deffered objects. Some says, it can help me to escape callback hell. I want something like this. setTimeout there is imitate one async request:
function foo1(some) {
debugger;
setTimeout(function foo1async() {
debugger;
deffered.resolve();
}, 500);
return deffered.promise;
}
function foo2(some) {
debugger;
setTimeout(function foo2async() {
debugger;
deffered.reject();
}, 500);
return deffered.promise;
}
function foo3() {
debugger;
setTimeout(function foo3async() {
debugger;
deffered.resolve();
}, 500);
return deffered.promise;
}
var deffered;
function doChain() {
debugger;
deffered = $q.defer();
var promise = deffered.promise;
promise.then(foo1);
promise.then(foo2);
promise.then(foo3);
promise["finally"](function () {
debugger;
});
deffered.resolve();
}
I expect foo1 to be called, then foo1async will be called and resolve deffered object.
foo2 must be called, then foo2async is called.
3.Now I expect, that foo3 wouldn't start, because deffered is rejected in foo2async. After that I expect foo in finally section called.
Actually, I have this:
foo1, foo2 and foo3 are called. Then foo in finally section called. Then foo1async, foo2async and foo3async funtions are called.
How I can get what I am expecting?
Actually, I will have something like this:
for(var i = 0; i < N; i++) {
(function (iter) {
promise.then(function () {
foo(iter);
});
})(i);
}

You got a few things wrong here.
First, you use a deferred to convert a callback-based async function into a promise-based - but each one needs its own deferred.promise and thus its own deferred. Actually, I prefer to use the $q constructor instead:
function fooN(input){
return $q(function(resolve, reject){
setTimeout(function(){
resolve(input + "; some more data");
}, 500);
});
}
(you could use var deferred = $q.defer() as well)
fooN now returns a promise, so you don't need to use $q.defer() anymore.
In fact, if the async function already was promise-based, like $timeout or $http, then you wouldn't have needed a deferred at all, for ex:
function fooN(input){
return $timeout(function(){
return input + "; some more data";
}, 500);
})
So, let's assume that foo1, foo2 and foo3 are implemented like fooN - all returning promises.
To make the calls sequential, you would need to chain promises - not to attach multiple handlers to the some root promise.
I'll break it down for you:
function doChain(){
var foo1Promise = foo1();
var foo2AfterFoo1Promise = foo1Promise.then(foo2);
var foo3AfterFoo2Promise = foo2AfterFoo1Promise.then(foo3);
var promise = foo3AfterFoo2Promise.then(function(finalData){
return doSomeProcessing(finalData); // if needed
});
promise.catch(function(error){
// "rethrow", if can't handle
return $q.reject({msg: "Some error occurred"});
})
return promise;
}
Or, the same, more concise:
function doChain(p){
return foo1(p)
.then(foo2)
.then(foo3)
.then(function(finalData){
return doSomeProcessing(finalData);
})
.catch(function(error){
return $q.reject({msg: "Some error occurred"});
});
}
A "promised" return value of each function is an input to the next chained function.

You can use $q.all method. For instance:
var promises = [promise1, promise2, ...];
$q.all(promises).then(function () {
// do something
});

What happens now is that all foo* promises depend on the single promise; when it gets resolved all are triggered. In ASCII art the dependencies are:
┎ foo1
promise ╁ foo2
┖ foo3
What you want is:
function doChain() {
foo1()
.then(foo2)
.then(foo3)
;
}
No need for the extra promise. No callback hell either!

Scoping within Angular service call

I'm confused as to why I cannot get this service call to perform as needed. The console.log's within definitionsService.get promise resolution are what I would expect (the object I'm aiming to return). However the console.log right before I return defs is undefined which, of course, means my returned value is undefined. What am I missing?
function getDefinitions() {
var defs;
definitionsService.get().$promise.then(function(data) {
console.log(data);
defs = data;
console.log(defs);
});
console.log(defs);
return defs;
};
I changed the above to:
function getDefinitions() {
var defs = $q.defer();
definitionsService.get().$promise.then(function(data) {
defs.resovle(data);
});
return defs.promise;
};
per the below answer.
I also changed the way I call this method per the same answer like this:
function detail(account) {
getDefinitions().then(function(definitions) {
var key = angular.isDefined(definitions.ABC[account.code]) ? account.code : '-';
return definitions.ABC[key].detail;
});
}
Then in my controller I'm trying to do the following:
var getAccounts = function() {
playersService.getAccounts({
playerId: playerId
}).$promise.then(function(accounts) {
for (var i = 0; i < accounts.length; i++) {
accounts[i].detail = utilitiesService.detail(accounts[i]);
}
vm.accounts = accounts;
});
};
var init = function() {
getAccounts();
};
init();
My problem is that accounts[i].detail is consistently undefined.

Welcome to the world of asynchronous calls.
If you are making an async call inside getDefinitions (from definitonsService), then you must assume getDefinitions() is async as well. Which means you cannot simply return defs.
When you print defs before returning it, the async call of the service has yet to have been carried out.
defs should also be a promise object. You can then return it as you do, but the method invoking it should also use it with .then(function(defs)...
Or in code form:
function getDefinitions() {
var defs = $q.defer();
definitionsService.get().$promise.then(function(data) {
defs.resovle(data);
});
return defs.promise;
};
And whoever calls getDefinitions() :
getDefinitions().then(function(defs) {
// do something with defs...
}
Answer to question after edit:
The problem is once again with the async nature inside the getAccounts method.
utilitiesService.detail is an async method. So you are in fact assigning promises, not values, to accounts[i].detail.
Since each account will entail an async call, using $q.all seems like a good idea:
var promises = [];
for (var i = 0; i < accounts.length; i++) {
promises.push(utilitiesService.detail(accounts[i]));
}
$q.all(promises).then(function(values)){
// you should have all the account details inside 'values' and can update vm.accounts
}
remember - getting the promise is synchronous. Getting the value that the promise... well, promises to get you - that's asynchronous.

The problem is that you are returning defs before the promise has resolved, while defs === None.
You can solve this by changing your code a bit:
function getDefinitions() {
return definitionsService.get().$promise.then(function(data) {
return data;
});
};

Angular $q.defer() returns Object{then: function}

I have the following Angular file, where I try to access a database with $http, and then use this data in a $scope variable (to display in the webpage). The trouble is I can't get $q.defer to run as I believe it should. The console.log() inside the $http function logs an object containing the data returned from the database. However when I call the function it logs Object {then: function}. The data is contained within this object, but it is not the only part of the object. (It seems like it's in Object.$$v. I'm not sure what that means.)
var app = angular.module("app", []);
app.factory('portfolioFactory', function ($http, $q) {
var obj = {};
obj.getResponse = function(){
var deferred = $q.defer();
$http.get('./../includes/portfolio/db_access.php').success(function(data){
deferred.resolve(data);
console.log(data);
});
//console.log(deferred.promise);
return deferred.promise;
}
return obj;
});
app.controller("PortfolioCtrl", function($scope, portfolioFactory) {
$scope.PortfolioItems = portfolioFactory.getResponse();
console.log($scope.PortfolioItems);
});

$http.get( ... );
Returns a promise.
app.controller("PortfolioCtrl", function($scope, portfolioFactory) {
portfolioFactory.getResponse().then(function(response) {
$scope.PortfolioItems = response.data;
})
});
Will work.
In older versions of Angular $scope.PortfolioItems = portfolioFactory.getResponse();
would have worked too, but in newer versions Angular does not automatically unwrap promises anymore.
A promise is basically an alternate and nicer way of handling async action (a design pattern).
Rather than using callbacks in a regular fashion you can put your callbacks in a queue with promise.then( callback ). Then whenever the deferred.resolve method is called, the callbacks are called with the results. If the promise already is resolved before the callbacks where queued they are immediately called with the cached data. Much nicer than doing query( callback ) code that quite often turns into callback hell.
FYI you could rather do this, as the result of any $http call is a promise already:
app.factory('portfolioFactory', function ($http) {
var obj = {};
obj.getResponse = function(){
return $http.get('./../includes/portfolio/db_access.php').then(function(data){
console.log(data);
return data; //Return data further up the chain.
});
}
return obj;
});

You should be able to invoke the "then" function to get to your data.
app.controller("PortfolioCtrl", function($scope, portfolioFactory) {
$scope.PortfolioItems = portfolioFactory.getResponse();
$scope.PortfolioItems.then(function(results){
console.log(results);
};
});
It might spell it out to label things like this....
app.controller("PortfolioCtrl", function($scope, portfolioFactory) {
$scope.PortfolioItems = null;
var fetchPortfolioItems = portfolioFactory.getResponse();
fetchPortfolioItems.then(function(results){
$scope.PortfolioItems = results;
console.log($scope.PortfolioItems);
};
});