Angular get to JSON file displaying as empty

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" }
  ]
}

The $http.get is asynchronous and hasn't completed yet. If you put a $watch on 'countries', the callback will run when $scope.countries is updated. You could also use {{countries}} in one of your views and you'll see the data in the view when it returns. — Ethan Jewett
– Ethan Jewett, Commented Apr 17, 2014 at 14:25
Anywhere in your controller. The other answers are correct as well. I would suggest logging in your success function before you assign data to $scope.countries, as it sounds from your responses to other answers like you're never getting to this point. — Ethan Jewett
– Ethan Jewett, Commented Apr 17, 2014 at 16:15

ppa · Accepted Answer · 2014-04-17 14:38:43Z

2

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.

answered Apr 17, 2014 at 14:38

ppa

3261 silver badge5 bronze badges

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

10 Comments

Couturier Boris Over a year ago

Maybe like this :

$http.get('/resources/data/countries-report.json') .success(function(data) { alert(data); }.error(function() { console.error("$http.get() error"); }

Oam Psy Over a year ago

Tried: $http.get('/resources/data/countries-report.json').success(function(data) { alert(data); }); and an alert appears with [object Object]

Couturier Boris Over a year ago

@ppa Yes, it's work So try to alert(JSON.stringify(data)); or just console.log(data), you will see your data in console.

Couturier Boris Over a year ago

Into success function ? huum strange :/ I didn't see before, but if data is on json format, you must use JSON.parse(data), not stringify. I don't know if it will solve your problem, but maybe console.log(JSON.parse(data)) will work ?

klode Over a year ago

@ppa the code in the answer is not correct. Should be $http.get(...).success(successCallback).error(errorCallback) or $http.get(...).then(successCallback, errorCallback) see docs: docs.angularjs.org/api/ng/service/$http#get

|

klode · Accepted Answer · 2014-04-17 18:19:25Z

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.

edited Apr 17, 2014 at 18:19

answered Apr 17, 2014 at 15:04

klode

11.1k6 gold badges38 silver badges49 bronze badges

3 Comments

Oam Psy Over a year ago

im not sure how this helps?

klode Over a year ago

I was testing the code in a plunker first and forgot to change the url of the json file back to yours when I posted. I just re-edited accordingly.

klode Over a year ago

OK you got it working, just edited to clarify my answer anyway. Hope it helps.

Couturier Boris · Accepted Answer · 2014-04-17 14:38:29Z

1

$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
});

answered Apr 17, 2014 at 14:38

Couturier Boris

1981 silver badge10 bronze badges

1 Comment

Oam Psy Over a year ago

@Mysuno - Tried the above, even added console.log("console = " + JSON.stringify($scope.countries)); but the alert or console message never displays.. But in Firebug, i can see a successful GET to the JSON file and the data inside.

Collectives™ on Stack Overflow

Angular get to JSON file displaying as empty

3 Answers 3

10 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related