im trying to build an IOS and android app with Ionic Framework that has an Instagram Feed with the instagram api that shows all photos shared by hashtag(i’ll use the hashtag chocolat has an example) and i wanted to implement pull to refresh and infinite scrolling, so basicaly i would have a button that once clicked opened a view with the instagram feed and pulled the first 10 results, pull to refresh would try to get newer results, then if the feed was scrolled down it would add the next set of results (older results), i’ve been searching and i’ve built something that isnt working quite as intended, i’m a newbie developer in ionic, angularjs and javascript so i decided to post my question here.
so heres my code:
The factory or service to get the instagram json by http:
app.factory('PhotoService', function($http){
var BASE_URL = "https://api.instagram.com/v1/tags/chocolat/media/recent?access_token=+++";
//access_token hidden for privacy reasons
var items = [];
var nextUrl = 0;
return {
GetFeed: function(){
return $http.get(BASE_URL+'&count=10').then(function(response){
items = response.data.data;
nextUrl = response.data.pagination.next_url;
return items;
});
},
GetNewPhotos: function(){
return $http.get(BASE_URL+'&count=2').then(function(response){
items = response.data.data;
return items;
});
},
GetOldPhotos: function(){
return $http.get(nextUrl).then(function(response){
items = response.data.data;
return items;
});
}
}
});
The controller:
app.controller('CivrInstagramController', function($scope, $timeout, PhotoService) {
$scope.items = [];
$scope.newItems = [];
PhotoService.GetFeed().then(function(items){
$scope.items = items;
});
$scope.doRefresh = function() {
if($scope.newItems.length > 0){
$scope.items = $scope.newItems.concat($scope.items);
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
$scope.newItems = [];
} else {
PhotoService.GetNewPhotos().then(function(items){
$scope.items = items.concat($scope.items);
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
}
};
$scope.loadMore = function(){
PhotoService.GetOldPhotos().then(function(items) {
$scope.items = $scope.items.concat(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
});
The view:
<ion-view view-title="#Chocolat Photos!">
<ion-content>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div class="list card" ng-repeat="item in items track by item.id">
<div class="item item-avatar">
<img ng-src="{{item.user.profile_picture}}" ng- if="item.user.profile_picture.startsWith('https')">
<h2>{{item.user.full_name}}</h2>
<p><span am-time-ago="item.created_time" am-preprocess="unix"></span></p>
</div>
<div class="item item-body" >
<img ng-src="{{item.images.low_resolution.url}}" ng-if="item.images.low_resolution.url.startsWith('https')">
<p>
{{item.caption.text}}
</p>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" distance="5%"></ion-infinite- scroll>
</ion-content>
</ion-view>
The PhotoService.GetFeed() is working well as it populates correctly the first 10 photos, however, when i try to infinite-scroll i get the error: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use ‘track by’ expression to specify unique keys. I’m using track by item.id as you can see in the view, so i think this means im getting the same results over and over again with the PhotoService.GetOldPhotos(). as for the PhotoService.GetNewPhotos() it works when there is new data to display but it throws the same error of duplicates in a repeater when there is no new data to fetch (no new posts with #chocolat)
What am i doing wrong? can anyone give me some advice? thanks in advance for your time! Here is a plnkr * link to my project where you can actually see it trying to work :\
-
you might need to enable cross-origin resource sharing in your browser to see the feed working.