JSON 解析不适用于 ng-repeat答案

【问题标题】：JSON parse doesn't work for ng-repeatJSON 解析不适用于 ng-repeat
【发布时间】：2016-04-06 20:44:53
【问题描述】：

所以我使用的是 Ionic、Angular 和 ngCordova。我正在尝试加载一个 JSON 文件，该文件是我通过 JSON.stringify() 保存的对象数组。我有一个工厂来保存这个对象数组，基本上我有一个主页路由，它通过数组进行 ng-repeats 以显示对象。

加载工作正常，理论上解析器也是如此；我的 html 看起来像这样：

<ion-content ng-controller="HomePageControl">
{{posts}}
<ul class="list" ng-repeat="post in posts | limitTo:25">
  <a nav-direction="forward" class="item" ui-sref="entry({postID:$index})">
    {{post.text}}
  </a>
</ul>
<button class="button" ng-click="update()">Update</button>

所以“帖子”是我的 $scope.posts 对象；您可以看到我在列表之前和列表期间加载它（我正在使用 Android，这基本上是我可以调试的唯一方法）。我还有一个“更新”按钮（重新加载 json 并将帖子设置为与工厂中的帖子相同）。

我的 HomePageControl 如下所示：

.controller('HomePageControl', function($scope, postsFactory){
postsFactory.updatePosts();
  $scope.posts=[];
  postsFactory.readPosts().then(function(data) {
    $scope.posts = postsFactory.getPosts();
  })
  $scope.update=function(){
    postsFactory.updatePosts();
    $scope.posts= postsFactory.getPosts();
  }


})

所以，这里的问题是 {{posts}} 吐出正确的解析对象，看起来像这样，除了文本：

[{"text":"mreow"},{"text":"text"},{"text":"WORK"}]

但是 ng-repeat 没有任何作用。它只是空白。但是，当我按下更新按钮几次时，它会出现列表，但文本没有任何变化。 postFactory 中的代码也基本相同。

postsFactory：

.factory('postsFactory', function($cordovaFile,$ionicPlatform,$ionicPopup){
  var posts = [];
  var factory = {};
  factory.getPosts=function(){
    return posts;
  }
  factory.readPosts=function(){
      return $ionicPlatform.ready(function(){}).then(function(first){
        return $cordovaFile.readAsText(cordova.file.externalDataDirectory, "posts.json");
      }, function(error){
        return error + "not ready";
      }).then(function (second) {
          posts=JSON.parse(second);

         return posts;
      },function(error){
        return error + "Error reading";
      });
  }

  factory.updatePosts=function(){
    $ionicPlatform.ready(function() {
      $cordovaFile.readAsText(cordova.file.externalDataDirectory, "posts.json")
       .then(function (success) {
          posts=JSON.parse(success);
       }, function (error) {
         var alertPopup = $ionicPopup.alert({
            title: 'Error',
            template: 'Could not read file'
          });
       });
   });
  }
  return factory;
})

tldr;我的解析有效，但 ng-repeat 没有接受它。有什么想法吗？

【问题讨论】：

标签： javascript angularjs json ionic-framework ng-repeat

【解决方案1】：

当您处理异步方法时，该方法正在执行一些异步操作并将 promise 对象返回给使用者函数。基本上你需要把.then函数的getPosts服务方法调用。因此，一旦从getPosts 方法返回数据，它将调用您的.then 的成功/错误/捕获函数，这取决于承诺对象resolved/reject/error occured while processing request

postsFactory.getPosts().then(function(posts){
   $scope.posts = posts;
})

【讨论】：

这就是应该的工作；我第一次尝试过，但问题仍然存在。获取对象没有问题，因为当我在读取 JSON 后立即说 "posts= [{text:"text"},{text:"text"}] 时，它运行正常；当时它只是在读取 JSON这是有问题的。它也不会返回任何错误...

【解决方案2】：

所以，经过进一步的实验，我找到了问题的根源：它没有正确读取 JSON，因为它没有被正确写入。我通过替换 JSON 文本发现了这一点，并且一切正常。所以，为了解决这个问题，我使用angular.toJson(object) 方法代替了JSON.stringify(object) 函数。

所以，对于那些有同样问题的人，我的保存脚本如下所示：

factory.newPost=function(post){
      posts.push(post);
      $ionicPlatform.ready(function() {
          $cordovaFile.writeFile(cordova.file.externalDataDirectory, "posts.json", angular.toJson(posts), true).then(function (success) {

          });
      });
    }

干杯

【讨论】：