Question

我是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返回为＆＃34; undefined＆＃34;并未在页面上显示一点都不这是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在＆＃34; HelloController＆＃34;。

下列出未定义的国家/地区

为了完成，这里有app.js和aboutController.js：

app.js：

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

aboutController.js：

MyApp.controller('AboutController', about);

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

非常感谢任何帮助，并提前感谢您。

Answer 1

Angular的$http对象返回支持标准.then()函数的承诺，以及已弃用的 .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

Answer 2

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

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

工作演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

在Angular中解析json返回undefined

2 个答案: