Search code examples
angularapiresttypescript-typingsnginfinitescroll

Rick and Morty API (Angular)

I am trying to iterate some objects that this url give me: (https://rickandmortyapi.com/api/character) in a gallery of cards using *ngFor1

this is the only way I've found to render my call and once I scroll down it changes the url of my call2

The problem is that I don't want to refresh but I want to concatenate the results. I've already tried to transform the var "dataCharacter" in an array and then push the "res" in the array but the typing of interfaces and classes gives me some problems.

the service module3 interface4 class5

Please someone can help me with creating the right classes and interfaces? I'm studing this for the first time and I don't know how to continue. Thanks.

Solution

  • Your Character class should be renamed to CharacterResponse

    The CharacterResults class should just be called Character

    CharacterResponse {
   info: ...
   results: Array<Character>;
}

    Your component class will then accumulate the characters

    characters: Array = [];

    subscribe((response: CharacterResult) => this.characters.push(...response.result));

    template of course binds to characters array