AngularJS get request not returning data

Question

I Have the following code in which I'm trying to get a JSON file and attach its contents to my $scope.

The first console.log returns the result that I need, but the second returns undefined.

What would be the correct way to write this so that the data is stored?

'use strict';

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

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}]);


myApp.controller('View1Ctrl', [

  '$scope',
  '$http',

  function($scope, $http) {
    $http.get('view1/info.json')
    .then(function(res){
      $scope.data = res.data.info
      console.log($scope.data)
    });

    console.log($scope.data)
}]);

The data is being stored (in the controller scope)....but not until after your last console.log() runs because $http is asynchronous and takes time to complete. What exactly are you wanting to do. — charlietfl
– charlietfl, Commented Jul 1, 2016 at 1:33
I'm wanting to grab the json file and then store its info in $scope so I can use it in functions and put some of the content in a view — IAmAkittycatAMA
– IAmAkittycatAMA, Commented Jul 1, 2016 at 1:35
You can use it in view the way your code is set up now. If it's not working in view then problem is in view code or not understanding data structure properly — charlietfl
– charlietfl, Commented Jul 1, 2016 at 1:37

Jonathan Lam · Accepted Answer · 2016-07-01 01:34:48Z

1

AngularJS's $http.get()'s then() callback is called asynchronously.

That means that in the callback, it will work, but not in the second one.

answered Jul 1, 2016 at 1:34

Jonathan Lam

17.5k17 gold badges72 silver badges99 bronze badges

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

Comments

Mathew Varughese · Accepted Answer · 2016-07-01 01:38:10Z

0

The reason for this is with something called Promises. I definitely suggets looking into them. Here is kind of what happens in order:

$http.get('view1/info.json')

That tells javascript I want to get the JSON data. But it does not actually get it yet. Then, it does that console log.

console.log($scope.data)

Well $scope.data is undefined. Nothing has set it yet! Then, javascript actually gets the JSON data. When it gets the data, the function within the then is called. After this,

$scope.data = res.data.info
console.log($scope.data)

$scope.data is defined, which is why this console.log works. Read more about promises for more info!

Here is a good starting point: https://www.youtube.com/watch?v=wA0gZnBI8i4

answered Jul 1, 2016 at 1:38

Mathew Varughese

161 bronze badge

1 Comment

IAmAkittycatAMA Over a year ago

Thank you, that makes sense, I understand it lot better now. Thanks for the link too

Watte · Accepted Answer · 2016-07-01 01:35:55Z

0

Well, your data is stored. But not at the time your second console.log() gets executed. The "then" promise/callback will run after your second console.log(). If you need $scope.data in your templates, this should work. Angulars digest cycle will be run after the callback of $https.

answered Jul 1, 2016 at 1:35

Watte

3121 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS get request not returning data

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related