Ridoan Saleh Nasution Ridoan Saleh Nasution -4 years ago 59
AngularJS Question

How to return an array from an anonymous function using AngularJS?

I want to get (return) an array items from anonymous function when i "console.log" a variable that hold that anonymous function.

1) What i have wrote in my controller :

$scope.allBrands = function(){

var brands = [];

return BrandService.get().then(function(data) {

angular.forEach(data, function(value, key) {
return brands.push(value.name);
});

return brands;

});
};

console.log($scope.allBrands());


2) The result of console.log($scope.allBrands()) :

f
$$state: Object
status: 1
value: Array[33]
0: "ALAIA"
1: "ALBERTA FERRETTI"
2: "Alessandra Rich"
3: "Alexander Mcqueen"
4: "Alexander Wang"
5: "Alice + Olivia"
6: "Amanda Wakeley"
7: "Balenciaga"
8: "Bcbg Maxazria"
9: "Bcbg Maz Azria"
10: "Biyan"
11: "Burberry"
12: "Calvin Klein"
13: "Casadei"
14: "Chanel"
15: "Charlotte Olympia"
16: "Chloe"
17: "Christian Dior"
18: "Dolce & Gabbana"
19: "Emilia Wickstead"
20: "Farah Khan"
21: "Fendi"
22: "Gucci"
23: "Halston Heritage"
24: "Herve Leger"
25: "Lanvin"
26: "Louis Leeman"
27: "Mary Katrantzou"
28: "Roberto Cavalli"
29: "Sebastian Gunawan"
30: "Self-Portrait"
31: "Valentino"
32: "Versace"
length:
__proto__: Array[0]
__proto__: Object
__proto__: Object


3) The result i would like to achieve :

["ALAIA", "ALBERTA FERRETTI", "Alessandra Rich", "Alexander Mcqueen", "Alexander Wang", "Alice + Olivia", "Amanda Wakeley", "Balenciaga", "Bcbg Maxazria", "Bcbg Maz Azria", "Biyan", "Burberry", "Calvin Klein", "Casadei", "Chanel", "Charlotte Olympia", "Chloe", "Christian Dior", "Dolce & Gabbana", "Emilia Wickstead", "Farah Khan", "Fendi", "Gucci", "Halston Heritage", "Herve Leger", "Lanvin", "Louis Leeman", "Mary Katrantzou", "Roberto Cavalli", "Sebastian Gunawan", "Self-Portrait", "Valentino", "Versace"]


Can anybody help me to get that array above from the function ?



*EDIT

This is the solution :

$scope.allBrands = function(){
var brands = [];
return BrandService.get().then(function(data) {
angular.forEach(data, function(value, key) {
brands.push(value.name);
});
return brands;
});
};

var promise = $scope.allBrands();

promise.then(function(result){
console.log(result);
},
function(error){
console.log(error);
});

Answer Source

Asynchronous call doesn't work the way you are thinking(synchronous way). They doesn't return a value as soon as server you call them. You have to wait till server respond to request.

Over here as you did console.log the allBrands function which return promise object(seems like $resource promise), that is getting consoled. And you can see your response in the promise object as soon as it arrives. I'd say you should use .then over your promise object where you can just get a data returned from API.

$scope.allBrands().then(successCB(states){
   $scope.states = states;
   console.log(states);
}, errorCB(error){
   console.log(error)
}) 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download