Undefined variable AngularJS

Question

Why I can't get my value through of one function? I'm doing rest requests for tests so you can get a date only and always tells me value undefined.

Example

$http.get('app/components/home/controller/test_calendar.json').then(function(value) {
    $scope.example2 = value.data.data[0];
    //console.log($scope.example2);
});

$scope.setDayContent = function(date, content) {
    console.log($scope.example2);
};

I get a value undefined with $scope.example2 or other value. With my first console the data appear well

Please add a output/log of `value` for debugging. Mostly `undefined` means that the variable is not defined :) — lin, Oct 31 '16 at 10:11

Thierry · Answer 1 · 2016-10-31T10:55:09.900

3

I think you are calling setDayContent() before the http request (which is asynchronous) is done, so before $scope.example2 is set. You can check this by uncommenting the console.log in the 'then' function and see if you have your value.

If your function setDayContent() is called from a user action in the html (I suppose, because it is in the scope) - a button for example - you can disabled it until the data are loaded, something like this:

<button ng-click="setDateContent(...)" ng-disabled="!example2">

edited Oct 31 '16 at 10:55

answered Oct 31 '16 at 10:15

Thierry

5,133
3
25
30

yes i have the value in my http get but i need the information in my function Setdaycontent – Jose Cerejo Oct 31 '16 at 10:16
@JoseCerejo I have updated my answer – Thierry Oct 31 '16 at 10:55

score 0 · Answer 2 · answered Oct 31 '16 at 10:18

0

Because your $http.get() is asynchronous call.
check the Web Console(F12), and XHR call responses, change your assignment and call setDayContent inside your callback function.

answered Oct 31 '16 at 10:18

satya-j

349
1
4
11

score 0 · Answer 3 · answered Oct 31 '16 at 10:29

you need to call the $scope.setDayContent function after getting value from json,note that $http call is asynchronous

// Code goes here

angular
  .module('myApp', [])
  .run(function($rootScope) {
    $rootScope.title = 'myTest Page';
  })
  .controller('testController', ['$scope', '$http',
    function($scope, $http) {

      /*my JSON file test_calendar.json
      test_calendar = {
        "data": [{
          "name": "nikhil"
        }]
      }*/

      $http.get('test_calendar.json').then(function(value) {

        $scope.example2 = value.data.data[0];
        $scope.setDayContent();
      });

      $scope.setDayContent = function(date, content) {
        alert($scope.example2);
      };


    }
  ])

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-controller="testController">



  <p></p>
</body>

</html>

Undefined variable AngularJS

Example

3 Answers3