CODEWITHSUNDEEP
javascriptangularjsjsonionic-frameworkangularjs-ng-repeat
Mislarieth
Mislarieth

Reputation: 115

JSON parse doesn't work for ng-repeat

So I'm using Ionic, angular, and ngCordova. I'm trying to load a JSON file which I have saved via JSON.stringify() of an array of objects. I have a factory that holds this array of objects, and basically I have a home page route that ng-repeats through the array to display the objects.

The loading works fine, and theoretically so does the parser; my html looks like this:

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

So the "posts" is my $scope.posts object; you can see I load it before the list and during the list (I'm working on Android and this is basically the only way I can debug). I also have a button that "updates" (reloads json and sets posts equal to the posts in the factory) the data.

My HomePageControl looks like this:

.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();
  }


})

So, the problem here is that the {{posts}} spits out the correct parsed object, looking like this, except in text:

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

But the ng-repeat DOESN'T DO ANYTHING. It's just blank. However, when I press the Update button a couple times, it THEN comes up with the list, but without any change in the text. It's all basically the same code in the postsFactory too.

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; my parse works but ng-repeat isn't taking it. Any ideas?

Upvotes: 1

Views: 544

Answers (2)

Mislarieth
Mislarieth

Reputation: 115

So, after some further experimentation, I found the root of the problem: it wasn't reading the JSON correctly, because it wasn't being written correctly. I found this by replacing the JSON text, and everything loaded up fine. So, to fix this, I used the angular.toJson(object) method in replacement of the JSON.stringify(object) function.

So, for those with the same problem, my saving script looks like this:

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

          });
      });
    }

Cheers

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

As you are dealing with the asynchronous method, which is doing some asynchronous operation and returning a promise object back to the consumer function. Basically you need to put .then function of getPosts service method call. So that once data returned from the getPosts method it will call the success/error/catch function of the your .then depends on promise object resolved/reject/error occured while processing request 

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

Upvotes: 1

Related Questions