calling id from service in Angular 7

Question

And I have a web api call. But with a id.

I have this:

private readonly apiDiploma = 'api/support/teachers/personId';

Then I call this method like this:

  return this.http.get<DiplomaModel>(this.apiDiploma, spinnerMessage).pipe(map(result => result.documents));

But this doesn't work. But for example if I do this:

private readonly apiDiploma = 'api/support/teachers/1001/diploma/';

so the PersonId hardcoded. It works.

So what I have to change?

Thank you

this is the api method:

private readonly apiDiploma = 'api/support/teachers/personId/diploma/'; 

So I need the PersonId from:

export class TeacherSearchModel {
  personId: number;
  name: string;
  dateOfBirth: string;
  bsn: string;
  registerNumber: string;
}

But if I do this:

 private readonly apiDiploma = 'api/support/teachers/${personId}/diploma';

and then this:

  getDiplomaDocumentList(spinnerMessage?: string): Observable<DocumentListModel> {
            // Get and return diploma info from backend


            return this.http.get<DiplomaModel>(this.apiDiploma,  spinnerMessage).pipe(map(result => result.documents));
        }

I still get errors:

GET http://localhost:6597/api/support/teachers/$%7BpersonId%7D/diploma 400 (Bad Request)
scheduleTask @ zone.js:3243
push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410

Answer 1

Assuming personId is a variable which contains a person id, just concat personId to your URL: 'api/support/teachers/' + personId; or 'api/support/teachers/${personId}'; .

Answer 2

You should declare a property called personId , you can assign value to it based on your need / logic. replace personid in the apiDiploma using personId when making a service call using es6 template literal ${this.apiDiploma}${this.personid}

private readonly apiDiploma = 'api/support/personid/diploma/';

personiId = '1234'; //you can change the personid dynamically.

return this.http.get<DiplomaModel>(this.apiDiploma.replace('personid',this.personid), spinnerMessage).pipe(map(result => result.documents));