Pull results from services to collection and display on list

ionic-v1
1

Hey Guys,

I’m new to Ionic and i’m trying to convert the data from a local array on the demo app to using data from a json feed.

If i put the code into the controller directly i can pull items and display in the list. If i add the code into the services file and link to the function in the controller it doesn’t seem to return the data to the list and display.

Here is both my services and controller:

Controller:

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope) {
})

.controller('PlaylistsCtrl', function($scope, MenuFeed) {

	$scope.items = [];
  
  	$scope.items = MenuFeed;

  	console.log($scope.items)

  	return $scope.items; 
})


.controller('PlaylistDetailCtrl', function($scope, $stateParams) {
	$scope.items = Friends.get($stateParams.playlistId);
})

Services:

angular.module('starter.services', [])

.factory('MenuFeed', function($http) {


  var myHeader = {headers: {
            'Application-id': 'HIDDEN',
            'secret-key': 'HIDDEN'
        }
    };
  
  $http.get('https://api.backendless.com/v1/data/menu', myHeader).success(function (data) {

      console.log(data.data);

      return data.data;

  });



 });

I’m not sure what’s broken but any help would be great. I tried to put it on codepen but i don’t know how to put the services file as a seperate file without paying.

Thanks

2

This is more Angular specific.

//From you're factory:
.factory('MenuFeed', function($http) {
  return {
    getDataFunc: function() {
      // Set header

      return $http.get('https://api.backendless.com/v1/data/menu', myHeader).success(function (data) {
        console.log(data.data);
        return data.data;
      });
    }
  }
});

//And call it from you're controller
$scope.items = MenuFeed.getData();
3

Thank you for the reply, it now pulls the function through and displays the data on the console.

Sadly though, it still doesn’t display it on the list. Any ideas? :frowning:

4

Ok in the controller, replace $scope.items = MenuFeed.getData();
with:

MenuFeed.getData().then(function(data) {
  $scope.items = data;
});
1 Like
5

That’s got it :slight_smile: Thank you very very much!

Now just to figure out how to view the data on the detail screen with the id :smiley: