Angular get to JSON file displaying as empty - json

Question

I am new to angular and trying to integrate it within my application. I am attempting to use a simple $http.get to a .JSON file, which seems to be found, but when trying to pass the data to the front end, or even alert it, is it alerting as []
Here my get:
$scope.countries = [];
$http.get('/resources/data/countries-report.json', function(data){
$scope.countries = data;
}, function(error) {
//handle error here
});
alert(JSON.stringify($scope.countries));
Here's my .JSON file:
{
"firstName" : "Joe",
"surName" : "Bloggs",
"countries" : [
{ "name": "France", "population": "63.1" },
{ "name": "Span", "population": "52.3" },
{ "name": "United Kingdom", "population": "61.8" }
]
}

Answer 1

Try this:
$scope.countries = [];
$http.get('/resources/data/countries-report.json', function(data){
$scope.countries = data;
alert(JSON.stringify($scope.countries));
}, function(error) {
//handle error here
});
Alert should go in the callback.

Answer 2

This should do it
$http.get('/resources/data/countries-report.json').success(function(data) {
$scope.countries = data;
alert(JSON.stringify($scope.countries));
}).error(function(error) {
alert('error');
});
also this equivalent would work
$http.get('/resources/data/countries-report.json').then(function(data) {
$scope.countries = data;
alert(JSON.stringify($scope.countries));
}, function(error) {
alert('error');
});
Edit --
Instead of $http.get('/someUrl', sucessCallback, errorCallback) it should be either
$http.get('/someUrl').success(successCallback).error(errorCallback)
or
$http.get('/someUrl').then(successCallback, errorCallback)
see docs
Because $http.get is asynchronous alert should be moved in the successCallback function, to ensure that $scope.countries=data is executed before calling alert.

Answer 3

$http.get is an async function. when you try alert(JSON.stringify($scope.countries)); $scope.countries is equals to []. You must wait for server response before using data.
Try to do your alert into success function
$scope.countries = [];
$http.get('/resources/data/countries-report.json', function(data){
$scope.countries = data;
alert(JSON.stringify($scope.countries));
}, function(error) {
//handle error here
});