AngularJS scope of variable

Question

I'm trying to get a json file within a a controller with $http.get. All well until I try to access the property which holds the response. If I try console.log(property) inside the $http.get() it outputs the returned object, outside $http.get() accessing the very same property and it outputs undefined! I even try to attache it to the $scope and it's the same result?!

angular.module('todayfmApp')
    .controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {

        var self = this;

        $http.get('data/form-data.json').then(function(response) {
            self.formdata = response.data;

            console.log(self.formdata);
        });

        console.log(self.formdata);


    }]);


{
    "settings": {
        "version": "",
        "Step": "",
        "filterBreak": "",
        "pid": ""
        },
    "category": [
        { "name": "Select All", "selected": true },
        { "name": "Carlow", "value": "Carlow" },
        { "name": "Cavan", "value": "Cavan" },
        { "name": "Clare", "value": "Clare" },
        { "name": "Cork", "value": "Cork" },
        { "name": "Derry", "value": "Derry" },
        { "name": "Donegal", "value": "Donegal" },
        { "name": "Down", "value": "Down" },
        { "name": "Dublin", "value": "Dublin" },
        { "name": "Galway", "value": "Galway" },
        { "name": "Kerry", "value": "Kerry" },
        { "name": "Kildare", "value": "Kildare" },
        { "name": "Kilkenny", "value": "Kilkenny" },
        { "name": "Laois", "value": "Laois" },
        { "name": "Leitrim", "value": "Leitrim" },
        { "name": "Limerick", "value": "Limerick" },
        { "name": "Louth", "value": "Louth" },
        { "name": "Mayo", "value": "Mayo" },
        { "name": "Meath", "value": "Meath" },
        { "name": "Monaghan", "value": "Monaghan" },
        { "name": "Offaly", "value": "Offaly" },
        { "name": "Roscommon", "value": "Roscommon" },
        { "name": "Sligo", "value": "Sligo" },
        { "name": "Tipperary", "value": "Tipperary" },
        { "name": "Waterford", "value": "Waterford" },
        { "name": "Westmeath", "value": "Westmeath" },
        { "name": "Wexford", "value": "Wexford" },
        { "name": "Wicklow", "value": "Wicklow" }
    ],
    "num_nights": [
        { "name": "1 Night", "value": 1, "selected": true},
        { "name": "2 Nights", "value": 2 },
        { "name": "3 Nights", "value": 3 },
        { "name": "4 Nights", "value": 4 },
        { "name": "5 Nights", "value": 5 },
        { "name": "6 Nights", "value": 6 },
        { "name": "7 Nights", "value": 7 }
    ],
    "num_rooms": [
        { "name": "1 Room", "value": 1, "selected": true },
        { "name": "2 Rooms", "value": 2 },
        { "name": "3 Rooms", "value": 3 },
        { "name": "4 Rooms", "value": 4 }
    ],
    "num_adults": [
        { "name": "1 Adult", "value": 1 },
        { "name": "2 Adult", "value": 2, "selected": true }
    ],
    "num_child": [
        { "name": "0 Kids", "value": 0, "selected": true },
        { "name": "1 Kids", "value": 1 },


{ "name": "2 Kids", "value": 2 }
]

}

Answer 1

In your case the problem is that $http.get response data is a late binding method. The response of this method will be available only after the service call is finished. This is an asynchronous method so that this will not be accessible inside scope as you expect. For that you need to bind your response inside a $scope variable and use it later inside a function call.

You will need to call the self.getResponseData method at first, say at the time of controller initialization. There after call a method self.logResponseData to log the response data.

You may need to change your calls something like this.

angular.module('todayfmApp')
.controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {

    var self = this;
    // Get the response data with service call
    self.getResponseData = function(){
        $http.get('data/form-data.json').then(function(response) {
            self.formdata = response.data;

            console.log(self.formdata);
        });
    }

    //Method to read the response data later
    self.logResponseData = function() {
        console.log(self.formdata);
    }

    //Call the method at the time controller loaded to initialize the `self` variable
    self.getResponseData();

}]);