在 Angular 中解析 json 返回 undefined答案

【问题标题】：Parsing json in Angular returns undefined在 Angular 中解析 json 返回 undefined
【发布时间】：2016-12-13 12:59:21
【问题描述】：

我是 Angular 的新手，我正在经历这个 tutorial 并且我遇到了问题解析给定的 json，如下所示：

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

问题是 json 被返回为“未定义”并且没有显示在页面上一点也不。这是 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>

这是 homeController.js 文件：

MyApp.controller('HelloController', hello);

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

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

使用 Google Chrome 开发者工具调试给了我一个警告，上面写着：

为已经承载的元素调用 Element.createShadowRoot() 不推荐使用影子根。看 https://www.chromestatus.com/features/4668884095336448 了解更多详情。

ng-inspector 在“HelloController”下列出未定义的国家/地区。

为了完整起见，这里是app.js和aboutController.js：

app.js：

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

关于Controller.js：

MyApp.controller('AboutController', about);

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

任何帮助将不胜感激，并提前感谢您。

【问题讨论】：

标签： angularjs json

【解决方案1】：

Angular 的$http 对象返回一个支持标准.then() 函数的promise，以及一个已弃用 .success() 函数。 .then() 返回一个标准的 response 对象；已弃用的 .success() 函数返回一个 data 对象。

您（正确地）将代码更改为更新后的 .then() 函数，而不是教程中使用的 .success()，但没有考虑返回对象的差异。

代替

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

你应该使用：

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

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

【讨论】：

非常感谢@Claies，这解决了问题。

【解决方案2】：

您必须在代码中进行的一些代码更改：

为什么要为同一个视图多次使用ng-controller="HelloController"？
-->在同一个视图上工作时，您只需初始化一个控制器一次。所以，把 ng-controller="HelloController" 在视图的根元素中并从页面中删除其他元素。
为什么要使用单独的控制器来仅显示文本 {{name}}？
--> 您只能在同一控制器 HelloController 中执行此操作。

工作演示：

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>

【讨论】：