Angular newbie needs help!

hey there!

thank you for reading :slight_smile:

so I’m making a pokedex using angular. 

I want to get data first from this API:  

https://pokeapi.co/api/v2/pokemon/
the JSON looks like this:

{"count":964,"next":"https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20","previous":null,"results":[{"name":"bulbasaur","url":"https://pokeapi.co/api/v2/pokemon/1/"},{"name":"ivysaur","url":"https://pokeapi.co/api/v2/pokemon/2/"},{"name":"venusaur","url":"https://pokeapi.co/api/v2/pokemon/3/"},{"name":"charmander","url":"https://pokeapi.co/api/v2/pokemon/4/"},{"name":"charmeleon","url":"https://pokeapi.co/api/v2/pokemon/5/"},{"name":"charizard","url":"https://pokeapi.co/api/v2/pokemon/6/"},{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon/7/"},{"name":"wartortle","url":"https://pokeapi.co/api/v2/pokemon/8/"},{"name":"blastoise","url":"https://pokeapi.co/api/v2/pokemon/9/"},{"name":"caterpie","url":"https://pokeapi.co/api/v2/pokemon/10/"},{"name":"metapod","url":"https://pokeapi.co/api/v2/pokemon/11/"},{"name":"butterfree","url":"https://pokeapi.co/api/v2/pokemon/12/"},{"name":"weedle","url":"https://pokeapi.co/api/v2/pokemon/13/"},{"name":"kakuna","url":"https://pokeapi.co/api/v2/pokemon/14/"},{"name":"beedrill","url":"https://pokeapi.co/api/v2/pokemon/15/"},{"name":"pidgey","url":"https://pokeapi.co/api/v2/pokemon/16/"},{"name":"pidgeotto","url":"https://pokeapi.co/api/v2/pokemon/17/"},{"name":"pidgeot","url":"https://pokeapi.co/api/v2/pokemon/18/"},{"name":"rattata","url":"https://pokeapi.co/api/v2/pokemon/19/"},{"name":"raticate","url":"https://pokeapi.co/api/v2/pokemon/20/"}]}

for that, I made 2 separate classes -just to get things organized- for the shape of the data

export class pokemonEndpoint{
    count: number;
    next: string;
    previous: boolean; 
    result: myData[];
}
 
export class myData{
    name: string;
    url: string;
}

I made a service that gets the data:

export class ApiService {
  //pokes: pokemonEndpoint;
  private url='https://pokeapi.co/api/v2/pokemon/' ;
  constructor( private http: HttpClient){}

  
  getPokemonNames(): Observable<pokemonEndpoint>{
    return this.http.get<pokemonEndpoint>(this.url);
  }

  (everything is imported appropriately)

Also, I made a component to display that data, in the TS file got the data from the service like that:

export class PokemonComponent implements OnInit {
  myList: pokemonEndpoint;

  constructor(public endpoint: ApiService) { }

  ngOnInit() {
    this.getPokes();
  }


  getPokes():void{
    this.endpoint.getPokemonNames().subscribe(myList => this.myList=myList);
    
  }
  
}

to test that it works I tried to display what is supposed to be fetched:

<div>
    {{myList.count}}
    {{ myList.next }}
    {{ myList.result[0].name }}
</div>

well, the app crashes, there’s an error that says that result is undefined. are my classes wrong? The data an array of objects inside one.
if I remove 

{{ myList.result[0].name }}

the app displays the count and the URL correctly but there are still errors that say:
“Cannot read property ‘count’ of undefined”

how did it display it if it’s not defined I’m confused

Please help, I’ve tried to understand what’s going on but to no avail

ok so I found the first mistake, it was stupid, lol

but I still get that they are undefined. that is still confusing.

You’re going to have to show us a little more info. Like the full source file containing the <div> tags you showed in your first post. You might use a gist for that.

The “undefined” suggests you’ve not set up “myList” in such a way as Angular can “see” it.