Angular js beim Aufruf von api Ich benutze die Daten nicht in der gleichen Funktion

Question

In diesem Code rufe ich die API. Die Anforderung ist, die Daten von 3 api zu nehmen und alle von ihnen zu aggregieren und in der Tabelle anzuzeigen.

var app = angular.module ('myApp', []);

app.controller('PersonController', function($scope,$http) { 
    $scope.arr1 =[]; 
     $scope.arr2 = []; 
     $scope.arr3 = []; 
     $scope.temp ; 


     function fetchAllBillable(){ 
      var me =$scope;   
      $http.get("http://echo.jsontest.com/insert-key-here/insert-value-here/key/value") 
       .then(function(response) { 
          $scope.temp = response.data; 

         console.log(me.temp); 

     }); 
     return $scope.temp; 

the value of scope.temp is undefined 

Answer 1

$http läuft asynchron, so dass die Log-Anweisung außerhalb then wird noch nicht zur Verfügung.

angular.module('plunker', []).controller('MainCtrl', function($http, $scope) { 
    $http.get('https://jsonplaceholder.typicode.com/posts/1') 
    .then(function(res) { 
     $scope.data = res.data; 
     console.log(res.data); // Object {...} 
    }); 
    console.log($scope.data); // undefined 
}); 

Edit:

Sie können mit Versprechen Chaining $ http ruft fusionieren oder $q.all

angular.module('plunker', []).controller('MainCtrl', function($http, $scope, $q) { 
    var users = 'https://jsonplaceholder.typicode.com/users/1'; 
    var comments = 'https://jsonplaceholder.typicode.com/comments/' 

    // Promise chaining 
    $http.get(users) 
    .then(function(res) { 
     $scope.user = res.data; 
     return $http.get(comments); 
    }) 
    .then(function(res) { 
     $scope.comments = res.data.slice(30) 
    }) 

    // $q.all 
    $q.all([ 
    $http.get(users), 
    $http.get(comments) 
    ]).then(function(resolves) { 
    // resolves[0] is users 
    // resolves[1] is comments 
    }) 
}); 

Answer 2

Ich bin nicht sicher, aber in dem Code versehen Sie die schließenden Tags nicht richtig sind. Außerdem ist $http ein Async-Aufruf (siehe this Stack Overflow-Artikel für weitere Informationen), so dass der nachfolgende Code ausgeführt wird, bevor die Anforderung ausgeführt wird.

Der folgende Code sollte funktionieren.

app.controller('PersonController', function($scope,$http) { 
    $scope.arr1 =[]; 
     $scope.arr2 = []; 
     $scope.arr3 = []; 
     $scope.temp ; 


     function fetchAllBillable(){ 
      var me =$scope;   
      $http.get("http://echo.jsontest.com/insert-key-here/insert-value-here/key/value") 
       .then(function(response) { 
          $scope.temp = response.data; 

         console.log(me.temp); 
         return $scope.temp; 

       }); 
     }; 
};