Unable to read json using angularjs

Question

In the below code,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dashboard</title>
        <!-- Libs -->
        <script src="angular.js"></script>
        <script>
        var countryApp = angular.module('countryApp', []);
        countryApp.controller('CountryCtrl', function ($scope, $http){
            $http.get('country_codes.json').success(function(data) {
                $scope.countries = data;
            });
        });
        </script>   
    </head>
    <body ng-controller="CountryCtrl">

    </body>
</html>

/* country_codes.json */

[
  {
    "code": "AD",
    "name": "Andorra",
    "population": "84000"
  },
  {
    "code": "AE",
    "name": "United Arab Emirates",
    "population": "4975593"
  }
]

As per debugging, I do not see any error and the callback functions does not execute.

Why the controller callback does not execute?

You should handle the .error callback too, not just the .success. — Avijit Gupta
– Avijit Gupta, Commented Jan 6, 2016 at 18:09

kamal · Accepted Answer · 2016-01-06 18:13:11Z

2

After adding ng-app="countryApp" in your html tag its works for me.

answered Jan 6, 2016 at 18:13

kamal

687 bronze badges

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

2 Comments

kamal Over a year ago

Yes, ng-app tells angularjs that HTML tag element is the "owner" of an AngularJS application. You can add ng-app to any tag like a div tag

overexchange Over a year ago

But still the code does not work. Can you fiddle the code?

Lax · Accepted Answer · 2016-01-06 19:08:29Z

1

Add error function, and you will see error details:

<script>
        var countryApp = angular.module('countryApp', []);
        countryApp.controller('CountryCtrl', function ($scope, $http){
              $http.get('country_codes.json')
    .then(function(data) {$scope.countries = data;}
,
          function(data) {console.log("error: "+data)});
 });
 </script>

change the json to:

{
    "countries": [
     {
    "code": "AD",
    "name": "Andorra",
    "population": "84000"
  },
     {
    "code": "AE",
    "name": "United Arab Emirates",
    "population": "4975593"
  }

    ]  

}

edited Jan 6, 2016 at 19:08

answered Jan 6, 2016 at 18:15

Lax

1,1671 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Unable to read json using angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related