javascript - 如何在 Angular JS 中正确迭代 JSON 文件？

Question

我正在尝试使用 Angular 创建一个列表，我的数据来自 json 文件。我无法使其工作。

我的 HTML 看起来像这样

     <ion-list>
     <div ng-repeat="item in artists" class="card">
      <ion-item class="item-avatar">
      <img src="https://api.adorable.io/avatars/400/">
      <h2>{{item.name}}</h2>
      <p>{{item.reknown}}</p>
      </ion-item>
     </div>
     </ion-list>

我的 Angular 代码是这样的

.controller('listController',['$scope','$http',function($scope, $http){
$http.get('js/data.json').success(function(data){
  $scope.artists = data;
});
}])

json 数据如下所示

{
"artists": [
    {

        "name": "Barot Bellingham",
        "reknown": "Royal Academy of Painting and Sculpture"
    },
    {


        "name": "Jonathan G. Ferrar II",
        "reknown": "Artist to Watch in 2012"
    },
    {

        "name": "Hillary Hewitt Goldwynn-Post",
        "reknown": "New York University"
    } 
]
}

我的 ng-repeat 不知怎的不起作用。也许我无法正确迭代对象数组。你能帮我一下吗？

Answer 1

您应该从 json 访问艺术家数组，它会像这样，

app.controller("listController", ["$scope","$http",
    function($scope,$http) {
       $http.get('test.json').then(function (response){
                $scope.artists = response.data.artists;
                console.log(data)
        });

}]);

<强> DEMO