cant get anything out of angular InMemoryDbService

Question

So I completed the Angular 4 Heroes tutorial and I thought I was ready to go. So I created my own project and I wanted to try out some stuff for myself. Which unfortunately failed.

What I want to do: I want to use an in memory database to retrieve my data from. In my in memory database I store an array of Semesters which I want to return when as an array of semesters when my getSemesters() get called using this endpoint: api/semesters. Then I want to display the data in a list. Unfortunately the list does not show up (or get loaded somehow).

I tried to research this problem reading some documents and the documenation: https://github.com/angular/in-memory-web-api The documentation describes that the in memory database assumes there is an ID. My semester object won't use an ID field for reasons. So I was wondering of that could be my problem. In that case I will just skip using the in memory database.

Anyone got tips/improvements/explanations on my issue?

So here is the inmemory dataservice (I cut out other rows to make it smaller):

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const semesters = [
      { 'semester': 1,
      'modules': [
        {'module_code': 'JAV1',
         'module_name': 'Programming in Java 1',       
          'credits': 5 },
        ]}
    ];
    return {semesters};
}

My semester class:

import {Module} from './module';
export class Semester {
  semester: number;
  modules: Module[];
}

My module class:

export class Module{
  module_code: string;
  module_name: string;
  credits: number;
} 

My backend-mockup.service:

@Injectable()
export class BackendMockupService {
  private headers = new Headers({'Content-type': 'application/json'});
  private semestersUrl = 'api/semesters';

  constructor(private http: Http) { }

  getSemesters(): Promise<Semester[]> {
    this.http.get(this.semestersUrl)
      .toPromise()
      .then(response => response.json().data as Semester[])
      .catch(this.handleError);
    return null;
  }


  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

My app.component.ts file:

@Component({
  selector: 'app-fmms',
  templateUrl: './app.html',
  styleUrls: ['./app.scss']
})
export class AppComponent implements OnInit {
  semesters: Semester[];

  constructor( private bms: BackendMockupService) {}

  getSemesters(): void {
    this.bms.getSemesters().then(semesters => this.semesters = semesters);
  }

  ngOnInit(): void {
    this.getSemesters();
  }
}

the HTML fragment:

 <ul>
   <li *ngFor="let semester of semesters">
     <span>{{semester.semester}}</span>
   </li>
 </ul>

and last but not least the app.module.ts file:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    UtilModule,
    AppRoutingModule,
    LoginModule,
    StartModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService)
  ],
  providers: [ BackendMockupService],
  bootstrap: [AppComponent]
})

Kind regards,

All help is appreciated.

Answer 1

In the backend-mockup service null is returned. the return null should be removed and the first statement should be returned.

 getSemesters(): Promise<Semester[]> {
    return this.http.get(this.semestersUrl)
      .toPromise()
      .then(response => response.json().data as Semester[])
      .catch(this.handleError);
 }