AngularJS scope of variable [duplicate] - angularjs

Question

This question already has answers here:
not able to access $scope object outside a http response callback function in angularjs
(3 answers)
Closed 5 years ago.
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();
}]);

Answer 2

self.formdata = response.data.jsondatavariablename;
// Use the JSON data name

Answer 3

$http.get() is asynchronous which roughly means that when you call this it sends request and doesn't stop code on here to wait until it responded, next statements execution is continued though response is still hasn't come and you have no data from it. That's why you need callback function in .then() method, it is being called when you get your response, where you can use your response data. For example, you can assign it to some $scope property and it will update this value everywhere you use this property.
$http uses so called Promises to achieve this. I tried to make it simple but if you want know more detailed how it works, guess that's what will help you: Promise