用离子框架无限滚动Instagram的饲料没有停止转发错误重复 [英] instagram feed with ionic framework infinite-scroll doesn't stop duplicates in repeater error

问题描述

我试图建立与离子的框架iOS和Android应用程序，都有一个Instagram的饲料与Instagram的API，它显示了包括hashtag共享所有照片（我将使用＃标签巧克力有一个例子），我想实现拉刷新和无限滚动，所以basicaly我想有一个按钮，一旦点击打开了与Instagram的饲料观点，拉着前10个结果，拉刷新会尝试让新的结果，那么如果饲料向下滚动它会添加下一个结果集（较旧的结果）的。我一直在寻找，我已经建立了按预期不是很努力的东西。
我在离子，angularjs和JavaScript的新手开发人员，所以我决定在这里发表我的问题。

I'm 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 isn't working quite as intended. I'm a newbie developer in ionic, angularjs and javascript so i decided to post my question here.

因此​​，这里是我的code：

So here is my code:

工厂或服务通过HTTP GET的Instagram的JSON：

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;
      });
    }
  }
});

控制器：

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');
    });
  };
});

视图：

<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>

在 PhotoService.GetFeed（）运作良好，因为它填入正确的前10张照片，但是，当我尝试无限滚动我得到的错误：

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.

我使用的是轨道由item.id，你可以在视图中看到的，所以，我认为，这意味着即时得到相同的结果，一遍又一遍的 PhotoService.GetOldPhotos（）。作为在 PhotoService.GetNewPhotos（）它的工作原理，当有新的数据来显示，但它抛出重复的同样的错误在转发时，有没有新的数据获取（与#chocolat没有新帖）

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)

我究竟做错了什么？任何人都可以给我一些建议吗？预先感谢您的时间！这里是一个 plnkr ++ 链接到我的项目中，你可以看到它努力工作：\\

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.

EDIT1：几乎完成

因此​​，一些长时间后，有些的console.log（）之后的：P我能得到按标签养活的Instagram，并使其与离子拉力刷新和离子无限滚动工作（以及90％我猜）但我仍然与我的code的一个问题，因为每次我滚动到最后一组项目的时候，我不能停止无限滚动，也不loadMore（），他们会尝试加载更多的数据，因为最后nextUrl是不确定的，但Instagram的-API接受和放大器; next_max_tag_id =不确定，再次让我最近的结果，这导致一个错误，因为可以在NG-重复不重复，我不想再次显示第一批结果

So after some long hours and after some console.log()'s :p I was able to get a instagram feed by tag and make it work with ionic pull to refresh and ionic infinite scrolling (well 90% I guess) but I'm still with a problem with my code, because every time I scroll to the last set of items I can't stop infinite scroll nor loadMore() and they will try to load more data, because the last nextUrl is undefined but instagram-api accepts the &next_max_tag_id=undefined and gets me the most recent results again and this results in an error because there can be no duplicates in ng-repeat and I dont want to show the first results again.

我只需要停止loadMore和无限滚动时，有没有更多的结果，或者如果与放大器; next_max_tag_id = undefined或是否有两个数组复制（但我不认为这是建议的性能明智的）。因此，这里是一个 plnkr 与我的项目，感谢您的时间！

I just need to stop loadMore and infinite-scroll when there are no more results, or if &next_max_tag_id=undefined, or if there are duplicates in both arrays (but I don't think this is recommended performance wise). So here is a plnkr with my project, thank you for your time!

我改变了标签的东西，低的结果，所以你可以真正看到错误不滚动的厌倦：P

推荐答案

我们分别解决了这一点，但我想我会在这里发表的答案了。主要的变化是

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

1. 切换到JSONP避免CORS限制


2. 使用的Instagram的 min_tag_id 和 max_tag_id 格式


3. 更新 getOldPhotos（）方法时，有没有 next_max_tag_id （从技术上自动返回一个空数组，这返回不同的承诺，这已经解析为一个空数组。）


4. 更改 $ scope.loadMore（）来检查空响应，并设置一个标志，杀＆LT;离子无限滚动＆GT;

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>

在这里看到一个完整的工作副本： http://plnkr.co/edit/ LBW0pp？p = preVIEW

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

这篇关于用离子框架无限滚动Instagram的饲料没有停止转发错误重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！