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

我正在尝试使用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>

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不知何故不起作用。也许我无法正确地迭代对象数组。你能帮我吗？

试试看：

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

试试看：

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

---

您应该从json访问艺术家数组，如下所示

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

}]);

---

您应该从json访问艺术家数组，如下所示

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

}]);

以下是解决您问题的方法

您的控制器必须是

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

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

{{item.name}
{{item.reknown}

以下是解决您问题的方法

您的控制器必须是

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

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

{{item.name}
{{item.reknown}

他们只需尝试在php中获取json并将其分配给所需的变量即可

<?php $json = file_get_contents('your path od json file'.'.json');
      $result =json_decode($json,true);
?>
<script type="text/javascript">
  var inputjson = <?php echo json_encode($result); ?>;
</script>

var inputjson=；

他们只需尝试在php中获取json并将其分配给所需的变量即可

<?php $json = file_get_contents('your path od json file'.'.json');
      $result =json_decode($json,true);
?>
<script type="text/javascript">
  var inputjson = <?php echo json_encode($result); ?>;
</script>

var inputjson=；

确保

$scope.artists

是一个对象数组。您可能应该执行

$scope.artists=data.artists

确保

$scope.artists

是一个对象数组。可能您应该执行

$scope.artists=data.artists