Question

我无法获取json文件数据这是我的代码请帮我解决这个问题 HTML代码是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

       <script src="js/app.js"></script>
    <script src="js/data.json"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-dark">
        <h2 class="title">Artist List</h2>
      </ion-header-bar>

  <div class="bar bar-subheader
      item-input-inset bar-light">
     <label class="item-input-wrapper">
        <i class="icon ion-search"></i>
        <input type="search" placeholder="Search">
     </label>
  </div>

      <ion-content ng-controller="ListController"
      class="has-subheader">
        <ion-list>
          <ion-item ng-repeat='item in artists'
           class="item-thumbnail-left item-text-wrap">
          <img src="img/{{item.shortname}}_tn.jpg" alt="{{item.name}} Photo" >
          <h2>{{item.name}}</h2>
          <h3>{{item.reknown}}</h3>
          <p>{{item.bio}}</p>

        </ion-item>
      </ion-list>
      </ion-content>
    </ion-pane>
  </body>
</html>

aap.js文件

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

data.json文件

[
{
  "shortname": "Barot_Bellingham",
  "name": "Barot Bellingham",
  "reknown": "Royal Academy of Painting and Sculpture",
  "bio": "Barot has just finished his final year at The Royal Academy",        
},
{
  "shortname": "Constance_Smith",
  "name": "Constance Smith",
  "reknown": "Academy of Painting and Sculpture",
  "bio": "Smith has just finished his final year at The Royal Academy",        
}
]

Answer 1

这是工作链接http://plnkr.co/edit/soWghwLtwXtjQC1ZnmTC?p=preview

我在您的JSON文件中发现一个问题，即您的数据以每个块中的逗号结尾，因此您无法将数据输入到艺术家所以你的json应该如下所示

[
{
  "shortname": "Barot_Bellingham",
  "name": "Barot Bellingham",
  "reknown": "Royal Academy of Painting and Sculpture",
  "bio": "Barot has just finished his final year at The Royal Academy"      
},
{
  "shortname": "Constance_Smith",
  "name": "Constance Smith",
  "reknown": "Academy of Painting and Sculpture",
  "bio": "Smith has just finished his final year at The Royal Academy"       
}
]

Answer 2

这可能与您的问题无关，但您应该考虑使用then()代替success()。自{1.4}以来，success()和error()的使用已被贬值。

$http.get('js/data.json').then(function(data){
  // successcallback
}, function(error){
  // errorcallback
});

in ionic我无法从json文件中获取数据

2 个答案: