Parsing json in Angular returns undefined

Question

I am new to Angular and I am going through this tutorial and I have problem with parsing the given json which looks like this:

{ "records": [   
    {
        "Name" : "Alfreds Futterkiste",
        "City" : "Berlin",
        "Country" : "Germany"   
     },   
     {
        "Name" : "Centro comercial Moctezuma",
        "City" : "México D.F.",
        "Country" : "Mexico"   },   
     {
        "Name" : "Ernst Handel",
        "City" : "Graz",
        "Country" : "Austria"   },   
     {
        "Name" : "FISSA Fabrica Inter. Salchichas S.A.",
        "City" : "Madrid",
        "Country" : "Spain"   },   
     {
        "Name" : "Island Trading",
        "City" : "Cowes",
        "Country" : "UK"   
     } 
    ] }

The problem is that the json is returned as "undefined" and not shown on page at all. This is the index.html:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>AngularJS  Tutorial Series</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div ng-controller="HelloController">Hi {{name}}, welcome to AngularJS Tutorial Series</div>

<div ng-controller="AboutController">Brought to you by {{name}}.</div>

        <h2>Load me some JSON data : )</h2>
        <table ng-controller="HelloController">
          <tr>
            <th>Name</th>
            <th>City</th>
            <th>Country</th>
          </tr>
          <tr ng-repeat="country in countries">
            <td>{{country.Name}}</td>
            <td>{{country.City}}</td>
            <td>{{country.Country}}</td>
          </tr>
        </table>
<!-- Angular JS Scripts -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>

<!-- AngularJS Application Specific Scripts -->
<script src="app/app.js"></script>
<script src="app/controllers/homeController.js"></script>
<script src="app/controllers/aboutController.js"></script>
</body>
</html>

and this is homeController.js file:

MyApp.controller('HelloController', hello);

function hello($scope, $http){
    $scope.name = "Rodrick";

    $http.get('countries.json').then(function(data) {
          $scope.countries = data.records;
    });
}

Debugging with Google Chrome Developer Tools gives me one warning which says:

Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.

ng-inspector lists countries as undefined under "HelloController".

For the sake of completion, here are app.js and aboutController.js:

app.js:

var MyApp = angular.module("MyApp", []);

aboutController.js:

MyApp.controller('AboutController', about);

function about($scope)
{
    $scope.name = "Kode Blog Tutorials";
}

Any help would be much appreciated and thank you in advance.

Claies · Accepted Answer · 2016-12-11 19:29:48Z

1

Angular's $http object returns a promise which supports the standard .then() function, and a deprecated .success() function. The .then() returns a standard response object; the deprecated .success() function returns a data object.

You (correctly) changed your code to the updated .then() function, rather than the .success() used in the tutorial, but didn't account for the difference in the returned object.

Instead of

$http.get('countries.json').then(function(data) {
      $scope.countries = data.records;
});

You should use:

$http.get('countries.json').then(function(response) {
      $scope.countries = response.data.records;
});

http://plnkr.co/edit/O9OyooBZLO9xaCQg8HpH?p=preview

answered Dec 11, 2016 at 19:29

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

1 Comment

Shema Over a year ago

Thank you very much, @Claies, this solved the problem.

Rohìt Jíndal · Accepted Answer · 2016-12-13 04:59:21Z

Some of the code changes you have to made in your code :

Why use ng-controller="HelloController" multiple times for the same view ?
--> You have to initialize one controller only once when working on the same view.So, put the ng-controller="HelloController" in the root element of the view and remove others from the page.
Why you use separate controller for just displaying the text {{name}} ?
--> you can do this in same controller HelloController only.

Working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('HelloController',function ($scope) {
    $scope.countries = [   
    {
        "Name" : "Alfreds Futterkiste",
        "City" : "Berlin",
        "Country" : "Germany"   
     },   
     {
        "Name" : "Centro comercial Moctezuma",
        "City" : "México D.F.",
        "Country" : "Mexico"   },   
     {
        "Name" : "Ernst Handel",
        "City" : "Graz",
        "Country" : "Austria"   },   
     {
        "Name" : "FISSA Fabrica Inter. Salchichas S.A.",
        "City" : "Madrid",
        "Country" : "Spain"   },   
     {
        "Name" : "Island Trading",
        "City" : "Cowes",
        "Country" : "UK"   
     } 
   ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="HelloController">
          <table>
          <tr>
            <th>Name</th>
            <th>City</th>
            <th>Country</th>
          </tr>
          <tr ng-repeat="country in countries">
            <td>{{country.Name}}</td>
            <td>{{country.City}}</td>
            <td>{{country.Country}}</td>
          </tr>
        </table>
</div>

Collectives™ on Stack Overflow

Parsing json in Angular returns undefined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related