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
– sourabh lodha, Commented May 8, 2017 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
– macha devendher, Commented May 8, 2017 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
– sourabh lodha, Commented May 8, 2017 at 16:59

Community · Accepted Answer · 2017-05-23 12:02:44Z

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, 2017 at 12:02

CommunityBot

11 silver badge

answered May 8, 2017 at 17:08

Marc

8116 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sourabh lodha Over a year ago

It give me undefined.Is there no way can i use this $scope.temp and after this function.

Marc Over a year ago

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

sourabh lodha Over a year ago

var abc=fetchAllBillable(); alert(abc'); It print undefined .I need the value in abc for further operation.

Marc Over a year ago

What if you remove everything inside .then and write return response.data;

sourabh lodha Over a year ago

it provide same response undefined

Phix · Accepted Answer · 2017-05-08 18:06:17Z

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 8, 2017 at 18:06

answered May 8, 2017 at 17:07

Phix

10.1k4 gold badges39 silver badges65 bronze badges

4 Comments

sourabh lodha Over a year ago

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 Over a year ago

In this code comments when we display on console.log(comments); it shows undefined.Can you look up the issue

Phix Over a year ago

My mistake, I haven't used $q.all in a while. The argument in the callback is an array of resolved data.

sourabh lodha Over a year ago

What if it is 3 API.Thanks Phix for help

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related