Angular js while calling api I doesn't use the data in same function

Question

In this code I call the api.The requirement is to take the data from 3 api and aggregate all of them and display in table.

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

Yes I get response in console.log(me.temp) which is written inside but doesn't get response in outside the http.get. — sourabh lodha, May 08 '17 at 16:53
Make sure that your return statement should be inside function (as I am not able to see closed braces in your function ) and it is taking initial temp value. — macha devendher, May 08 '17 at 16:57
Ya it is inside can you provide me reference with this code.The api is present here.I just need to get the array for perform the operation. — sourabh lodha, May 08 '17 at 16:59

Phix · Answer 1 · 2017-05-08T18:06:17.863

1

$http runs asynchronously, so the log statement outside then won't be available yet.

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:

You can merge $http calls with promise chaining or $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
  })
});

edited May 08 '17 at 18:06

answered May 08 '17 at 17:07

Phix

9,364
4
35
62

In this Summary.html I have write a controller where data coming from 3 API as following Billable API 1. psbillableOffshore 2. offshoreManager1 Buffer API 1. psbufferOffshore 2. OffshoreManager Client API 1.offshoreManager 2.clientBillingOffshore1 3.clientBillingOffshore2 In all three api manager name is common. I need to display in table. 1.offshoreManager 2.psbillableOffshore 3. psbufferOffshore 4.clientBillingOffshore1 5.clientBillingOffshore2 – sourabh lodha May 08 '17 at 17:16
In this code comments when we display on console.log(comments); it shows undefined.Can you look up the issue – sourabh lodha May 08 '17 at 18:01
My mistake, I haven't used `$q.all` in a while. The argument in the callback is an array of resolved data. – Phix May 08 '17 at 18:06
What if it is 3 API.Thanks Phix for help – sourabh lodha May 08 '17 at 18:12

score 1 · Accepted Answer · edited May 23 '17 at 12:02

1

I am not sure, but in the code you provided the closing tags are not right. Also, $http is an async call (see this Stack Overflow article for more info), so the code after will execute before the request is done.

The code below should work.

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;

              });
       };
};

edited May 23 '17 at 12:02

Community

1
1

answered May 08 '17 at 17:08

Marc

71
15

It give me undefined.Is there no way can i use this $scope.temp and after this function. – sourabh lodha May 08 '17 at 17:24
No there is not, that I am aware of, that is why there is .then. What happens if you try to return **response.data**? @sourabhlodha – Marc May 08 '17 at 17:37
var abc=fetchAllBillable(); alert(abc'); It print undefined .I need the value in abc for further operation. – sourabh lodha May 08 '17 at 17:46
What if you remove everything inside .then and write **return response.data;** – Marc May 08 '17 at 17:55
it provide same response undefined – sourabh lodha May 08 '17 at 18:08

Angular js while calling api I doesn't use the data in same function

2 Answers2