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?

Yes, i have used console.log(response.data) it show me the JSON Object correctly, like console.log(friends) too, but i need to view it in my template (tabs-friends.html) — Cristian Echeverria
– Cristian Echeverria, Commented Feb 25, 2015 at 14:18

Stephan Willmeroth · Accepted Answer · 2015-02-25 21:51:34Z

3

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

edited Feb 25, 2015 at 21:51

answered Feb 25, 2015 at 21:35

Stephan Willmeroth

645 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cristian Echeverria Over a year ago

Awesome! Great Help, this really help me! Thanks a lot! This is my first question in Stackoverflow and everyone help me a lot and really quickly, thanks to all for the answers.

Collectives™ on Stack Overflow

Ionic Framework with External JSON File

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related