Instagram Feed app with ionic framework need help!


#1

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.


#2

We solved this separately, but I figured I’d post the answer here too. The main changes are

  1. Switch to JSONp to avoid CORS restraints
  2. Use instagram’s min_tag_id and max_tag_id format
  3. Update the getOldPhotos() method to automatically return an empty array when there is no next_max_tag_id (Technically, it returns a different promise that’s already resolved to an empty array.)
  4. Change $scope.loadMore() to check for an empty response and set a flag to kill the <ion-infinite-scroll>

See a full working copy here: http://plnkr.co/edit/LBW0pp?p=preview


#4

Um… it could be an app permissions thing, I’m not sure. I haven’t looked at this in months, and I don’t do a lot of android development in general.

You should try narrowing it down to a minimal case of what doesn’t work (e.g. just loading a single image or whatever) and then post a new forum thread asking for help with that, and maybe link back to this one as the source.


#6

I do all the steps in your solution, but in my phone doesn’t show the images, only the text, can you help me please?