Невозможно получить первый элемент в массиве Angular

Question

Я получаю несколько сезонов сериала из своего API. После этого я хочу использовать seasons[0], чтобы получить первый элемент в массиве. Проблема в том, что seasons[0] возвращает undefined.

Мой код выглядит так:

 async ionViewWillEnter() {
    const seasons = await this.serieService.fetchCompleteSerie(this.serie);
    this.seasons = seasons;
    console.log(seasons); //output below
    console.log(seasons[0]); //undefined
    this.selected = seasons[0]; //undefined

  }

мой сервис выглядит так:

async fetchCompleteSerie(serie: Serie) {
    let allSeasons: any;
    let serieSeasons = [];
    let allEpisodes: any;
    let seasonEpisodes: any;
    allSeasons = await this.http.get('https://www.myapp.com/api/seasons/', this.httpOptions).toPromise();
    await allSeasons.forEach(async season => {
      season["episodes"] = [];
      if (season.serie === serie.url) {
        allEpisodes = await this.http.get('https://www.myapp.com/api/episodes/', this.httpOptions).toPromise();
        allEpisodes.forEach(episode => {
          if (episode.season === season.url) {
            season.episodes.push(episode);
            }
      });
        serieSeasons.push(season);
      }
    });
    return serieSeasons;
  }

Консоль вывод выглядит так: введите описание изображения здесь

Почему undefined?

Answer 1

Проблема в forEach, который НЕ ВОЗВРАЩАЕТ обещания, которые вы пытаетесь дождаться. По этой причине seasons[0] остается undefined. Но поскольку вы регистрируете массив в консоли, а внутри вашего обратного вызова используется ОДИН объект массива, консоль обновляет вывод после поступления данных. Если вы клонируете массив перед регистрацией, вы увидите, что он пуст console.log([...seasons]);

Просто переключите forEach на map и используйте Promise.all.

  async fetchCompleteSerie(serie: Serie) {
    let allSeasons: any;
    let serieSeasons = [];
    let allEpisodes: any;
    let seasonEpisodes: any;
    allSeasons = await this.http
      .get("https://www.myapp.com/api/seasons/", this.httpOptions)
      .toPromise();
    await Promise.all(allSeasons.map(async season => {
      season["episodes"] = [];
      if (season.serie === serie.url) {
        allEpisodes = await this.http
          .get("https://www.myapp.com/api/episodes/", this.httpOptions)
          .toPromise();
        allEpisodes.forEach(episode => {
          if (episode.season === season.url) {
            season.episodes.push(episode);
          }
        });
        serieSeasons.push(season);
      }
    }));
    return serieSeasons;
  }