Can't get first item in array Angular

Question

I get some seasons of a series from my API. After that, I want to use seasons[0] to get the first item in the array. The problem is that seasons[0] returns undefined.

My Code looks like this :

 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

  }

my service looks like this:

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

The console output looks like this :

Why is it undefined?

I know. First i thought it could be because of the async but I've no idea why — Janik Spies
– Janik Spies, Commented Jul 10, 2020 at 6:30
this happen with me as well when getting data from a signalr hub and trying to push the values into an array, but in my case i am using filter to get the data and the data is being returned — Kardon63
– Kardon63, Commented Jul 10, 2020 at 6:35
No, but can you try something like this await this.serieService.fetchCompleteSerie(this.serie).then(seasons => {this.seasons = seasons}); — Kardon63
– Kardon63, Commented Jul 10, 2020 at 6:56
Trt using a forEach and push your season objects into a new array.then try newArraySeasons[0]. let me know if it works. — Hansaka Sandaruwan
– Hansaka Sandaruwan, Commented Jul 10, 2020 at 7:39

kai · Accepted Answer · 2020-07-15 05:39:32Z

The problem is the forEach which DOES NOT RETURN the promises you try to wait for. For that reason seasons[0] is still undefined. But since you log the array to the console and THE SAME array object is used inside your callback, the console refreshes the output after the data arrives. If you clone the array before logging, you will see that its empty console.log([...seasons]);

Simply switch forEach to map and use 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;
  }

Collectives™ on Stack Overflow

Can't get first item in array Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related