拼接数组以添加到现有数组

时间:2019-02-09 21:23:54

标签: javascript arrays ionic-framework

我正在使用rss2json来使用RSS供稿。没有page参数可启用分页。我有一个count参数可以传递给请求。我能够加载供稿并获得结果。我已经使用ionic创建了一项服务,以请求获取供稿:

getRssFeed(rssUrl: string, count: number) {
    return new Promise<any>(resolve => {
        this.http.get(`${ environment.podcast.baseUrl }?rss_url=${ rssUrl }&api_key=${ environment.podcast.apiKey }&count=${ count }`)
            .subscribe(data => {
                resolve(data);
            }, error => {
                console.error('Something really bad happened trying to get rss feed.');
                console.error(error);
            });
    });
}

这很好。我可以取回数据-一切都很好。我正在使用infinite scroll组件来处理分页。同样,一切都很好。我从10集播客开始。当我想加载更多剧集时,我正在注销:

enter image description here

当我滚动时,该服务会进行正确的调用,但是由于rss2json服务没有page参数,因此当我更新count时它将返回整个数组。

所以我需要做这样的事情:

episodes: Array<any>;
count = 10;

...

this.episodes.splice(this.episodes.length, this.count, data.items);

我需要找出我已经有多少集。第一次到达列表底部时,我将有10个(每个负载我想增加+10)。所以我需要:

  • 找出我目前有多少集(10、20、30等)
  • 提出请求以获取更多剧集
  • 服务返回20集-但它总是 从零开始。
  • 切片前10、20,??返回的剧集,将剩余的10个添加到列表的末尾。

我不确定如何实现这一目标,可以使用一些指导。

这是我要求更多剧集的方式:

 this.myPodcastService.getRssFeed(this.rssUrl, this.count)
     .then(data => {
         if (data) {
             // console.log('data', data.items);
             // data is an object
             // data.items is an array of episodes

             // this.episodes.splice(this.episodes.length, this.count, data.items);
         } else {
             ...
         }
          ...
      });

例如,当我第一次看完剧集结尾时,页面上将显示10。我想出去,再获得10集。因此,我需要将count变量增加到20并将其作为count参数传递。

该服务将返回20个项目。我要删除的前10个(它们已经显示在屏幕上)。我只需要最近的10集...

现在我要播放20集。下次滚动时,需要将count增加到30。该服务将返回30个项目的数组。我将需要删除(剪接)前20个;仅保留最后10个-然后将其添加到episodes数组中。

日志记录应显示如下内容:

this.episodes[10]
this.episodes[20]
this.episodes[30]

我希望这是有道理的。我知道我要达到的目标,我在努力实现目标。谢谢您的任何建议!

编辑/解决方案

非常感谢您的建议!万一有人遇到这个问题,这就是我想出的,正是我所需要的。

// load more episodes using infinite scroll.
loadMoreEpisodes(event) {
    console.log('--> loading more episodes');

    this.count = (this.count + this.count);  // 10, 20, 30...

    this.myPodcastService.getRssFeed(this.rssUrl, this.count)
        .then(data => {
            if (data) {
                // append the new episodes to the existing array
                this.episodes.push(...data.items.splice(-this.episodes.length, this.count));
                event.target.complete();
                console.log('this.episodes', this.episodes);
            } else {
                this.alertCtrl.create({
                    header: 'Error',
                    subHeader: 'Something bad happened',
                    message: 'Something internet related happened & we couldn\'t load the playlist.',
                    buttons: [{ text: 'Ok', role: 'cancel' }]
                }).then(alert => {
                    alert.present();
                });
            }
        });
}

1 个答案:

答案 0 :(得分:2)

鉴于API没有提供获取特定数据的方法,客户端必须请求重复的数据,因此您可以.splice()从数组末尾

this.episodes.push(...data.splice(-10, 10))