I work with Ionic and api from the movie database. I wrote a service to make my HTTP request, which returns all the good. I get all my results in console.log, but for some reason I still cannot show the data in the view. So I was wondering if I am doing it wrong when it comes to two-way data binding
My service code:
angular.module('starter.services', []) .service('HotMoviesService', function($http, $q){ var final_url = "https://api.themoviedb.org/3/movie/popular?api_key=XXXX"; var self = { 'hotMovies' : [], 'loadHotMovies' : function() { var d = $q.defer(); $http.get(final_url) .success(function success (data){ console.log(data); self.hotMovies = data.results; d.resolve('The promise has been fulfilled'); }) .error(function error (msg){ console.error("There was an error retrieving the data " , msg); d.reject("The promise was not fulfilled"); }); return d.promise; } }; return self; });
My controller.js code is:
angular.module('starter.controllers', ['ionic.contrib.ui.hscrollcards', 'starter.services']) .controller('StartCtrl', function($scope, $http, HotMoviesService) { $scope.hotmovies = []; HotMoviesService.loadHotMovies().then(function success (data){ console.log(data); $scope.hotmovies = HotMoviesService.hotmovies; }, function error (data){ console.log(data) }); })
My html code is:
<ion-view view-title="The Movie Bank"> <ion-content class="background"> <h1 class="padding titleStart">Welcome to The Movie Bank</h1> <div class="logo"></div> <a class="customHref" href="#/app/hot"> <h1 class="padding customH1">Hot</h1> </a> <hscroller> <ion-scroll direction="x" scrollbar-x="false"> <hcard ng-repeat="hotmovie in hotmovies"> <a href="#/app/hot/{{hotmovie.id}}"> <img ng-src="http://image.tmdb.org/t/p/w92/{{hotmovie.poster_path}}" > </a> </hcard> </ion-scroll> </hscroller> </ion-content> </ion-view>
Here is a screenshot of my console, as you can see that everything is working fine:
source share