Первые 2 запроса проходят успешно, а начиная с 3-го всегда получаю сообщение undefined

Помогите понять в чем причина? Первые 2 запроса проходят успешно, а начиная с 3-го всегда идет undefined

В this.receptAll лежит следующее:

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]

0: {…}
1: {…}
2: {…}
3: {…}
4: {…}
5: {…}
6: {…}
7: {…}
8: {…}
9: {…}
10: {…}
11: {…}
12: {…}
13: {…}
14: {…}
15: {…}
16: {…}
17: {…}
18: {…}
19: {…}
length: 20

И если раскрыть любой из объектов, там:

calories: (...)
cautions: (...)
cuisineType: (...)
dietLabels: (...)
digest: (...)
dishType: (...)
healthLabels: (...)
image: (...)
ingredientLines: (...)
ingredients: (...)
label: (...)
mealType: (...)
nexthref: "https://api.edamam.com/api/recipes/v2?q=%20hen&app_key=%20ca99304a9de5bc6c29f01da311d0ba25&_cont=CHcVQBtNNQphDmgVQntAEX4BYlNtBQEDSmJBAWcRZ1FyAAMCUXlSVjYRMAN6VQtSRzBCCjcaNl1xBwYCEWIWBzATMFYhBVEVLnlSVSBMPkd5BgMbUSYRVTdgMgksRlpSAAcRXTVGcV84SU4%3D&type=public&app_id=52d453a9"
shareAs: (...)
source: (...)
totalDaily: (...)
totalNutrients: (...)
totalTime: (...)
totalWeight: (...)
uri: (...)
url: (...)
yield: (...)

Код запроса:

async addNewRecept() {
  try {
    const recept = await fetch(this.receptAll[this.receptAll.length - 1].nexthref);
    if (recept.type === 'cors') {
      const result = await recept.json();
      for (let i = 0; i < result.hits.length; i += 1) {
        this.receptAll.push(result.hits[i].recipe);
      }
    }
  } catch (error) {
    console.error(error);
  }
},

Получаю первые 20 рецептов в переменную receptAll таким образом:

  created() {
    this.getRecept();
  },
  methods: {
    async getRecept() {
      try {
        const recept = await fetch(
          'https://api.edamam.com/api/recipes/v2?type=public&q=%20hen&app_id=52d453a9&app_key=%20ca99304a9de5bc6c29f01da311d0ba25',
        );
        const result = await recept.json();
        for (let i = 0; i < result.hits.length; i += 1) {
          this.receptAll.push(result.hits[i].recipe);
          // eslint-disable-next-line no-underscore-dangle
          this.receptAll[i].nexthref = result._links.next.href;
        }
      } catch (error) {
        console.error(error);
      }
    },

https://codepen.io/salco2012/pen/gOxJoZv

введите сюда описание изображения введите сюда описание изображения


Ответы (1 шт):

Автор решения: Sanya H

Потому что у Вас есть проверка if (recept.type === 'cors') {, а соответственно, если условие не выполняется (а оно не выполняется), то никакие данные не будут добавлены.

Более того, пагинация изначально должна содержать все страницы, а не изменятся при подгрузке данных!

→ Ссылка