Вызов API в функции отложенной загрузки, ограничивающий ответ API

Question

Я настроил проект, в котором я ограничиваю ответ API 5, и, прокрутив страницу до конца, я делаю новый вызов API, чтобы получить следующие 2 элемента в API. Но с текущим кодом он только проверяет, существуют ли 5 ​​выбранных ранее элементов в состоянии карт. Я совершенно не уверен, как получить 2 следующих элемента в API? У кого-нибудь есть какие-либо предложения относительно того, как это сделать? Спасибо,

var app = new Vue({
el: '#app',
data: {
    cards: []
},
methods: {
    scroll(card) {
        window.onscroll = () => {
            let bottomOfWindow = document.documentElement.scrollTop + 
            window.innerHeight === document.documentElement.offsetHeight;
            if(bottomOfWindow) {
            const url = 
            'https://api.jsonbin.io/b/5cab36508b8d1301a25bd8fa/1/';
                axios.get(url)
               .then(response => {
               for (var i = 0; i < this.cards.length; i++) {
                            console.log('Cards id: ', this.cards[i].id)
                            if(this.cards[i].id !== 
                            response.data.results[i].id){            
                                for (var x = 0; x < 2; x++) {   
                                this.cards.push(response.data.results[x])
                                }

                            } else{
                                console.log('No more cards to load')
                            }
                        }
                    }
                })
            }
        }
    },
    getAPI(){
        const url = 'https://api.jsonbin.io/b/5cab36508b8d1301a25bd8fa/1/';


            axios.get(url)

            .then(response => {
                for (var i = 0; i < 5; i++) {
                    this.cards.push(response.data.results[i]);
                }
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });
        console.log(this.cards)

    }
},
mounted() {
    this.scroll(this.card)
}
})

Answer 1

Изменен метод проверки.Вместо того, чтобы делать это по длине карточек, вы перебираете длину результатов и, как только вы достигаете несуществующей карточки, вы добавляете их, следите за добавленной суммой и возвращаете после 2 или, когда не осталось ни одной.Я изменил логику цикла так:

//Card with position i from results doesn't exist
if(this.cards[i] == undefined){
   //add this card - maybe add more logic to check for duplicate incase of reordering of response
   this.cards.push(response.data.results[i])
   //track card added
   cardsAdded++;
} else {
    console.log('No more cards to load')
}

//check if cards added has reach limit of 2
if(cardsAdded == 2)
    return;

См .: https://jsfiddle.net/as4dm03q/