How to access objects returned by a service from within controllers

Question

I have a service that returned array of objects to a controller , the console showing the below response :

Array[0]
0
:
Object
first_name
:
"Emi"
id
:
"255860959988416847"
last_name
:
"Hauritz Seino"
url
:
"https://www.pinterest.com/amusemi/"
__proto__
:
Object
1
:
Object
first_name
:
"mohammed"
id
:
"474848491869398608"
last_name
:
"al-kahtani"
url
:
"https://www.pinterest.com/alkahtani0848/"
__proto__
:
Object
2
:
Object
first_name
:
"❤  T r e n d    2    W e a r  ❤  "
id
:
"418553496527224475"
last_name
:
""
url
:
"https://www.pinterest.com/trend2wear/"
__proto__
:
Object
length
:
3
__proto__
:
Array[0]

I need help to understand how the array showing "0" length while there are three objects in it, and how can I access these objects from within the controller .

Controller code:

$http.get('json/ConfigData.json').success(function(data) {
        $scope.ebayApiURL = data.ebay.BeautyebayPopularItems; 
        var parampins= 'PinsByBoard'; 
        var paramApiURL='PinsByBoardByTokenAPIURL'  
        arrpins=data.Pinterest[parampins];
        arrapiurl =data.Pinterest[paramApiURL];
        console.log(arrapiurl);
        console.log(arrpins);
        $scope.UrlArr=[];
        for(var i=0; i<data.Pinterest[parampins].length ;i++)
        {
            var PinFullUrl=arrapiurl + arrpins[i] + data.Pinterest.PiNJSONCALLBACKByToken;
            console.log(PinFullUrl);
            $scope.UrlArr[i]=PinFullUrl;

        }
            $scope.Creator=[];
            $scope.Creator=Comics.LoadDataFromPinteByToken($scope.UrlArr);
            console.log($scope.Creator);
      })

Service Code :

var deferred = $q.defer();
              var urlCalls = [];
              var mergedArray =[];
              var k=0;
              angular.forEach(UrLArray, function(url)
               {
                urlCalls.push($http.jsonp(url));
               });
                $q.all(urlCalls)
                  .then(function(results) {
                    deferred.resolve(
                    JSON.stringify(results.length))
                    console.log(results);
                    for(i=0;i<results.length;++i)
                        mergedArray[i]=results[i].data.data.creator;


             },
              function(errors) {
                deferred.reject(errors);
              },
              function(updates) {
                deferred.update(updates);
              }

              )
                  return mergedArray;

          }

Answer 1

you must return the the within the promise in the service like this

var deferred = $q.defer();
              var urlCalls = [];
              var mergedArray =[];
              var k=0;
              angular.forEach(UrLArray, function(url)
               {
                urlCalls.push($http.jsonp(url));
               });
                $q.all(urlCalls)
                  .then(function(results) {
                    deferred.resolve(
                    JSON.stringify(results.length))
                    console.log(results);
                    for(i=0;i<results.length;++i)
                        mergedArray[i]=results[i].data.data.creator;

             })
                  return deferred.promise; // return the promise 

          }
// and use then within controller 
// like : service.getData().then(function(resolved_data){
//console.log(resolved_data)
//})