Question

当我尝试使用简单的应用时，我无法使用ng-repeat显示json数据。在Console上，显示Json文件中的数据。抛出的错误是[ngRepeat：dupes]。我使用的是Google Chrome和Xampp。

<html ng-app="myAPP">
<script>
var myapp = angular.module("myAPP", []);

myapp.controller('simplectrl', function($scope, $http) {

$http.get('countries.json').success(function(data) {
    console.log(data);
    $scope.countries=data;

    });
});



</script>


<body ng-controller="simplectrl">

<h3> Country Data </h3>

<table>
    <tr>
    <th> Country </th>
    <th> Population </th>
    </tr>


    <tr ng-repeat="country in countries track by country.name" >
    <td> {{country.name}}</td>
    <td>{{country.population}}</td>
    </tr>
 </table>

</body>
</hmtl>

Countries.json：

{ "countries" :[
               { "name": "China", "population" :"1.4billion" },
               { "name": "India", "population" :"1.2billion" },
               { "name": "USA", "population":"300million" }
]};

我遵循SO中建议的一些解决方案但没有成功。有人建议使用$ index跟踪或使用ng-repeat中的country.name跟踪。请帮帮我。谢谢

Answer 1

只需更改get方法的回调

$http.get('countries.json').success(function (data) {
   $scope.countries = data.countries; // because actually countries is an object with a key countries containing all country 
 });

Answer 2

正如Mathieu Bertin所说，你应该改变你的回调GET方法的实现。

.success(function(data) {
    $scope.countries=data.countries;
});

我已为您创建了JSFiddle的工作示例。

Answer 3

我在代码中发现的另一个错误是在JSON文件的末尾添加分号。如所指出的那样，对于在JSON文件中写入的数据，语句必须是$scope.countries= data.countries。要使用$scope.countries= data，应修改JSON文件中的数据。对不起，如果我因为我的愚蠢错误浪费了任何人的时间。

为了解决这个问题，我读了大约20个关于这个主题的问题，花了几个小时。在这个过程中学习很棒。这些愚蠢的错误通常比较大的问题需要花费很多时间。 在学习任何编程语言时，新手必须非常注意语法错误 （自我注释）。

使用ng-repeat和Json Data

3 个答案: