$scope variable has no content

Question

I had controller and function getData as shown. The problem is that the $scope.results outside the for loop has no content. While inside the second http.get request, It has content.

appControllers.controller('MyaSellerOrderCtrl', ['$scope', '$rootScope', 'Order', '$http',
    function($scope, $rootScope, Order, $http) {
        $scope.results = [];
        $scope.getData = function() {
               $http.get('api/orders/business/?user_id=' + $rootScope.user.user_id).success(function(data){
                    for (var i = 0; i < data.length; i++) {
                        $http.get('api/orders/seller/?business_id=' + data[i].business_id).success(function(data1){
                             // console.log(data1);        
                             $scope.results[i] = data1;
                       });
                     }
                     console.log($scope.results);
                });
         };
         $scope.getData();
     }]);

Also, did you unwrap promises? And finally, $http should really go into a separate angular service, that would follow good practie and ease you out of some of the trouble. — Zlatko, Oct 04 '14 at 23:29
I am newbee to angularjs. SO how will I do to make this work — Riyas TK, Oct 06 '14 at 05:25

score 1 · Answer 1 · edited May 23 '17 at 11:43

Explanation

// STEP 1: your first request
 $http.get('api/orders/business/?user_id=' + $rootScope.user.user_id).success(function(data){
    // STEP 2 : your loop started
    for (var i = 0; i < data.length; i++) {
         // STEP 3 : you hit another request. it does not block any operation because it run asynchronously.
         // it also does not wait for any previous request to be completed.
        $http.get('api/orders/seller/?business_id=' + data[i].business_id).success(function(data1){
             // console.log(data1);
             $scope.results[i] = data1;
       });
     }
     // STEP 4: this doesn't wait for STEP 3 to complete because it [STEP 3 ] run asynchronously.
     // this lin run after for loop complete.
     console.log($scope.results); // so you get nothing here as STEP 3 is still running
});

Reference

so how will I modify this code so that i get the content in $scope variable..? — Riyas TK, Oct 06 '14 at 05:24
try using a service and return a promise from it. On resolution of promise, populate data into `$scope` variable. — TheVillageIdiot, Oct 06 '14 at 12:38
check this out http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/ — rajesh kakawat, Oct 07 '14 at 08:59

$scope variable has no content

1 Answers1