Ionic Framework with External JSON File

Question

i have a problem that i don't know how to solve, i have an IONIC Tabs Template and want to add an external JSON File to be showing instead of the template friends list that appears by default.

This is my app.js file

.state('tab.friends', {
      url: '/friends',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })
    .state('tab.friend-detail', {
      url: '/friends/:friendId',
      views: {
        'tab-friends': {
          templateUrl: 'templates/friend-detail.html',
          controller: 'FriendDetailCtrl'
        }
      }
    })

This is my controllers.js file

.controller('FriendsCtrl', function($scope, Friends) {
  $scope.friends = Friends.all();
})

.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
  $scope.friend = Friends.get($stateParams.friendId);
})

This is my services.js file, that access a JSON file:

.factory('Friends', function($http) {
var friends = [];
  return {
    all: function(){
      return $http.get("http://yanupla.com/apps/ligajaguares/equipos.json").then(function(response){
        friends = response.data;
        console.log(friends);
        return friends;
      });
    },
    get: function(friendId) {
       for (var i = 0; i < friends.length; i++) {
        if (friends[i].id === parseInt(friendId)) {
          return friends[i];
        }
      }
      return null;
    }
  }
});

And finally my tabs-friends.hm template:

<ion-view view-title="Friends">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friends/{{friend.id}}">
        <!--img ng-src="{{chat.face}}"-->
        <h2>{{friend.name}}</h2>
        <p>{{friend.bio}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

I can see the JSON file object in my browser using console.log, but i can't see anything else in the body of my template only the "Friends" title.

What 'm missing here?

Answer 1

I would guess that angular is accessing $scope.friends while it is still a promise. Have you tried resolving the variable by using the resolve statement in the .state-definition?

app.js should look something like this:

.state('tab.friends', {
  url: '/friends',
  views: {
    'tab-friends': {
      templateUrl: 'templates/tab-friends.html',
      controller: 'FriendsCtrl',
      resolve: {
        allfriends: function(Friends) {
          return Friends.all(); }
      }
    }
  }
})

and the controller would be:

.controller('FriendsCtrl', function($scope, allfriends) {
  $scope.friends = allfriends;
})

I think you need to use $q for correctly resolving, so the Service needs to look like this:

.factory('Friends', function($http, $q) {
var friends = [];
  return {
    all: function(){
      var dfd = $q.defer();
      $http.get("http://yanupla.com/apps/ligajaguares/equipos.json").then(function(response){
        friends = response.data;
        console.log(friends);
        dfd.resolve(friends);
      });
      return dfd.promise;
    },
    get: function(friendId) {
       for (var i = 0; i < friends.length; i++) {
        if (friends[i].id === parseInt(friendId)) {
          return friends[i];
        }
      }
      return null;
    }
  }
});

For more information on this, i recommend reading this formula from ionic: http://learn.ionicframework.com/formulas/data-the-right-way/

Additionally, this helped me a great deal in understanding the concept of promises: http://andyshora.com/promises-angularjs-explained-as-cartoon.html