javascript - Ionic Framework with External JSON File - Stack Overflow|Programmer puzzle solving

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?

Share Improve this question asked Feb 25, 2015 at 13:13 Cristian Echeverria 1553 silver badges14 bronze badges

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

Add a ment |

1 Answer 1

Sorted by: Reset to default 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./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

Programmer puzzle solving

javascript - Ionic Framework with External JSON File - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)