Fatal编程技术网
  • angularjs/
  • Angularjs 在Angular中解析json返回未定义

Angularjs 在Angular中解析json返回未定义

angularjs json

Angularjs 在Angular中解析json返回未定义,angularjs,json,Angularjs,Json,我对Angular是个新手，我正在经历这一切，我遇到了问题 通过解析给定的json，如下所示： { "records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Centro comercial Moctezuma", "City

我对Angular是个新手，我正在经历这一切，我遇到了问题 通过解析给定的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>
使用Google Chrome Developer Tools进行调试给了我一个警告，上面写着：

正在为已承载的元素调用Element.createShadowRoot（） 不推荐使用阴影根。看见 更多 细节

ng检查员将国家列为“HelloController”下未定义的国家

为了完整起见，以下是app.js和aboutController.js：

MyApp.controller('AboutController', about);

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

var MyApp = angular.module("MyApp", []);
关于controller.js：

MyApp.controller('AboutController', about);

function about($scope)
{
    $scope.name = "Kode Blog Tutorials";
}
任何帮助都将不胜感激。Angular的
$http
对象返回一个承诺，该承诺支持标准的
.then（）
函数和一个已弃用的
.success（）
函数。
.then（）
返回标准的
响应
对象；不推荐使用的
.success（）
函数返回一个
数据
对象

您（正确地）将代码更改为更新的
.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;
});

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

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

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'HelloController'，函数（$scope）{
$scope.countries=[
{
“姓名”：“阿尔弗雷德·富特基斯特”，
“城市”：“柏林”，
“国家”：“德国”
},   
{
“名称”：“商业中心Moctezuma”，
“城市”：“墨西哥联邦”，
“国家”：“墨西哥”}，
{
“名称”：“恩斯特·汉德尔”，
“城市”：“格拉茨”，
“国家”：“奥地利”}，
{
“名称”：“FISSA Fabrica Inter.Salchichas S.A.”，
“城市”：“马德里”，
“国家”：“西班牙”}，
{
“名称”：“岛屿贸易”，
“城市”：“考斯”，
“国家”：“英国”
} 
];
});


名称
城市
国家
{{country.Name}
{{国家.城市}
{{country.country}

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