Accessing value in an Array

Question

I've been working on a simple test project, but i happened to come across this really weird problem. I can't access values in an array.

pokemonStats$: Observable<PokemonStats[]>;

getPokemonStats(id: number): any {
this.pokemonStats$
.pipe(take(1))
.subscribe(stats => {
  console.log(stats instanceof Array);
  console.log('length', stats.length);
  console.log('du', stats);
  console.log('test', stats[1]);
});
}

And this is the output:

What's going on here? A colleague suggested it might be an array-like structure, that's why i added the 'instanceof' log. Any help is greatly appreciated.

EDIT: here's the code, where it gets filled

this.pokemonStats$ = this.getAllPokemonStats(ids);

getAllPokemonStats(ids: number[]): Observable<PokemonStats[]> {
const pokemonArray: PokemonStats[] = [];
ids.forEach(id => {
  const url = 'https://pokeapi.co/api/v2/pokemon/' + id;
  this.http.get(url)
    .pipe(take(1))
    .subscribe((data: PokemonStatsAPI) => {
      pokemonArray.push({
          id: data.id,
          name: data.name,
          speed: data.stats[0].base_stat,
          hp: data.stats[5].base_stat,
          attack: data.stats[4].base_stat,
          defense: data.stats[3].base_stat
        });
    });
});
return of(pokemonArray);

}

pokemonStats$: Observable<PokemonStats[]> In this line you clearly states that pokemoStats$ is Observable of PokemonStats[] in type definition — Gaurang Dhorda
– Gaurang Dhorda, Commented Jun 30, 2020 at 8:01
And that's why i subscribed to it, to access the array. But why is it showing length: 0 and why can't I access any of the values, even though they are clearly there when console.logging the entire object? — Tomas Loksa
– Tomas Loksa, Commented Jun 30, 2020 at 8:07
The 2nd log entry is interesting as it shows length 0 but it should be 5 from your next log. Can you show the code where the array is actually created? Or a reproducable example. — x4rf41
– x4rf41, Commented Jun 30, 2020 at 8:10
try doing JSON.stringify(stats) and add this json to your question so we can see the raw data in stats. — ViqMontana
– ViqMontana, Commented Jun 30, 2020 at 8:11
Can you try to remove take(1), and then see whats the result. — Gaurang Dhorda
– Gaurang Dhorda, Commented Jun 30, 2020 at 8:12

cyr_x · Accepted Answer · 2020-06-30 08:23:17Z

2

You're returning the new observable with the pokemonArray, which is empty and will be filled async, therefore when you subscribe to getAllPokemonStats it's empty.

Use the forkJoin operator to perform the http requests and map them using the map operator:

getAllPokemonStats(ids: number[]): Observable<PokemonStats[]> {
  return forkJoin(ids.map(id => {
    return this.http.get(`https://pokeapi.co/api/v2/pokemon/${id}`);
  })).pipe(
    map(results => results.map(data => ({
      id: data.id,
      name: data.name,
      speed: data.stats[0].base_stat,
      hp: data.stats[5].base_stat,
      attack: data.stats[4].base_stat,
      defense: data.stats[3].base_stat
    }))),
  );
}

answered Jun 30, 2020 at 8:23

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing value in an Array

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