Cannot GET /[object%20Object]

Question

I was retrieving peacefully everything from pokemon's api by declaring this line in an assets file like this :

export const configUrl = {
  pokemonBaseUrl: 'https://pokeapi.co/api/v2/',
};

And calling it inside my service like this :

  getPokemons(offset: number): Observable<any> {
    return this.httpClient.get(`${configUrl.pokemonBaseUrl}pokemon-species?offset=${offset}&limit=20`)
      .pipe(
        map((pokemonList: PokemonList) => this.addAdditionalPropertiesToEntity(pokemonList))
      );
  }

then calling it inside the side effects :

  @Effect()
  loadInitialPokemons$: Observable<Action> = this.actions$.pipe(
    ofType(MasterDetailActionTypes.StartLoadMasterDetails),
    switchMap((action: StartLoadMasterDetails) => this.pokemonService.getPokemons(action.payLoad.offset)),
    switchMap(result => of(new EndLoadMasterDetails(result))),
    catchError(err => of(new OnError(err.message)))
  );

Which has the following action type :

export class StartLoadMasterDetails implements Action {
  readonly type = MasterDetailActionTypes.StartLoadMasterDetails;
  readonly payLoad = {
    offset: 0
  };
}

Then inside my component i get the initial data like the following :

  ngOnInit() {
    this.createStateSubscriptions();
    this.createEventScrollSubscription();
    this.store.dispatch(new actions.StartLoadMasterDetails());
  }

My html is the following :

<div class="master-container">
  <div class="wrapper-scroll-y grid-scrollbar">
    <div class="tiles-container" *ngIf="(pokemonObservable$|async).pokemonList">
      <div class="card"  *ngFor="let pokemon of (pokemonObservable$|async).pokemonList.results">
        <div (click)= "onPokemonSelected($event, pokemon.id)">
          <div class="card-body">
            <img src="{{pokemon.spriteUrl}}">
          </div>
          <div class="card-footer footer">{{pokemon.name}}</div>
        </div>
      </div>
    </div>
  </div>
  <app-loader-indicator [show]="(pokemonObservable$|async).processingMaster"></app-loader-indicator>
</div>

Now what i'm trying to do, is instead of retrieving this data from the server directly, i want to put it inside a file. I tried this :

export const configUrl = {
  pokemonBaseUrl: {
    'pokemon-species': {
      'results': [
        {
          'name': 'bulbasaur',
          'url': 'https://pokeapi.co/api/v2/pokemon-species/1/'
        },
        {
          'name': 'ivysaur',
          'url': 'https://pokeapi.co/api/v2/pokemon-species/2/'
        }
      ]
    }
  },
};

And changed my http request to this :

  getPokemons(offset: number): Observable<any> {
    return this.httpClient.get(`${configUrl.pokemonBaseUrl["pokemon-species"]}`)
      .pipe(
        map((pokemonList: PokemonList) => this.addAdditionalPropertiesToEntity(pokemonList))
      );
  }

When i console log on my configUrl.routeBaseUrl["pokemon-species"], i get the data inside the file but once i run my project i get this error :

Answer 1

It appears that, rather than retrieve your data from an API, you just want to embed your data directly into your application instead. In this case, your angular service should no longer require the HttpClient dependency.

Assuming that configUrl is now just a document with the entire dataset, you would swap the call to httpClient.get with a direct query of that document.

For example, your getPokemons method might look something like this:

  getPokemons(offset: number): Observable<any> {
    const numberToRetrieve = 5;
    const pokemon = configUrl.pokemonBaseUrl["pokemon-species"]["results"];
    return of(pokemon.slice(offset, numberToRetrieve));
  }

You will also need to add the of function on your rxjs imports.

import { 
  Observable, 
  of // Add this
} from 'rxjs';

I am not familiar with the API you were previously calling, but I am assuming it only returned a few results at a time. I added numberToRetrieve as a placeholder to allow you to only get the next 5 pokemon. This number can obviously be whatever you want and could even be a parameter into your function.