如何正确迭代Angular JS中的JSON文件？

I'm trying to create a list using angular and my data comes from a json file.I'm unable make it work.

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

My HTML looks like this

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

And my angular code is this

我的角度代码就是这个

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

and the json data looks like this

并且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"
    } 
]
}

My ng-repeat is somehow not working. Maybe i'm unable to iterate properly over the array of objects. Can you help me out ?

我的ng-repeat在某种程度上不起作用。也许我无法在对象数组上正确迭代。你能帮我吗？

3 个解决方案

#1

You should access the artists array from the json, It will be like this,

你应该从json访问artists数组，它会是这样的，

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

}]);

DEMO

DEMO

#2

Here is the plunkr for your problem

这是你问题的傻瓜

Your controller must be

你的控制器必须是

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

Your HTML must be

你的HTML必须是

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

#3

Try:

尝试：

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

#1