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'
        }
      }
    })

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./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?

• javascript
• json
• angularjs
• ionic-framework

• do you have use console.log(response.data) ? any response? – Angu Commented Feb 25, 2015 at 13:18
• 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 Commented Feb 25, 2015 at 14:18

1 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./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 remend reading this formula from ionic: http://learn.ionicframework./formulas/data-the-right-way/

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