Angular Tour of Heroes and In Memory Data Service

I'm currently going through the Angular.io tour of heroes tutorial, making some really minor changes as I go along so I'm not 100% copying the tutorial.

I've reached section six on http, more specifically I'm using the In Memory Web Api Service to get a value by id.

Get hero by id

Most web APIs support a get by id request in the form api/hero/:id (such as api/hero/11). Add a HeroService.getHero() method to make that request:

I ran into a problem when I implemented this part, due to the minor changes I've made to the code. My data objects where different than the examples, they were named animal, had additional properties, and these properties were capitalised.

Tutorial Code

getHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get<Hero>(url).pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
  );
}

---

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];
    return {heroes};
  }
}

My Code

getAnimal(id: number): Observable<Animal>{
    const url = `${this.animalsUrl}/${id}`;
    return this.http.get<Animal>(url).pipe(
        tap(_ => this.log('fetched animal id=${id}')),
        catchError(this.handleError<Animal>('getAnimal id=${id}'))      
    );
  }

---

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const animals = [
      { Id: 11,Breed:"Guinea Pig", Name: 'Butter Bean' },
      { Id: 12,Breed:"Guinea Pig", Name: 'Coco Bean' },
      { Id: 13,Breed:"Cat", Name: 'Mia' },
      { Id: 14,Breed:"Cat", Name: 'Bowie' },
      { Id: 15,Breed:"Cat", Name: 'Mercury' },
      { Id: 16,Breed:"Cat", Name: 'Claude' },
      { Id: 17,Breed:"Dog", Name: 'Bobby' },
      { Id: 18,Breed:"Gecko", Name: 'Reggie' },
      { Id: 19,Breed:"Gecko", Name: 'Luna' },
      { Id: 20,Breed:"Gecko", Name: 'Lizard Face' }
    ];
    return {animals};
  }
}

The reason this wasn't working is due to me capitalising the id property on the object, and the fix was simply to change it back to "id".

However, I would like to keep the id capitalised as "Id" on the animal object, but I can't figure out how to do that and make the getAnimal method work with it. Is this possible to do with In Memory Web Api, if so would anyone be able to assist me?

The in-memory web api library currently assumes that every collection has a primary key called id.

from GitHub repo

So it is just a fixed requirement from the Angular in-memory-web-api to name the key id and not Id, foo, or whatever. What you try to achive is just not possible (yet).

Side note: Object properties are case sensitive and therefore id is not Id.