How do I access a link which I have to input multiple parameters in it on Angular (15)?

Question

I have the following link: "https://api.api-soccer.com/v1/championship/10/stages/168"

I want to access the object inside the ID /168 but first I have to access the ID on /10.

But I don't know how to do it on Angular.

// urls.ts

 const BASE_URL = "https://api.api-soccer.com/v1/"
 
 export const CHAMPIONSHIP_URL = BASE_URL + 'championship'
 export const CHAMPIONSHIP_BY_ID_URL = CHAMPIONSHIP_URL + '/'

---

// services.ts

 getChampionshipById(champId: string) {
 const httpOptions = {
 headers: new HttpHeaders().set("Authorization","Bearer test_potatobearer123")
   };
 return this.http.get(CHAMPIONSHIP_BY_ID_URL + champId, httpOptions);
  }  <<<< THIS CODE IS FOR CONTEXT PURPOSES

 getStageById(stageId: string) {
 const httpOptions = {
 headers: new HttpHeaders().set("Authorization","Bearer test_potatobearer123")
  };
 return this.http.get(CHAMPIONSHIP_BY_ID_URL + '/stages/' + stageId, httpOptions);
 }

---

// camp.component.ts

 export class StatusPhaseComponent {
 championship: any;
 stage: any;
 stagePhase: any;
 
 constructor(
 activatedRoute: ActivatedRoute,
 private championshipsService: ChampionshipsService,
 private router: Router
 ) {
activatedRoute.params.subscribe((params) => {
  if (params['id'])
   championshipsService.getChampionshipById(params['id']).subscribe((serverChampionship) => {
    this.championship = serverChampionship;
    this.stage = this.championship.current_phase
    this.stagePhase = this.stage.slug
   });
 });

Then I have tried the following but clearly didn't work, I ended up in a different ID than that of which I'm looking for:

getStageById(stageId:string, champId: string) {
 const httpOptions = {
 headers: new HttpHeaders().set("Authorization","Bearer test_potatobearer123")
  };
 return this.http.get(CHAMPIONSHIP_BY_ID_URL + champId + '/stages/' + stageId, httpOptions);
 }

 activatedRoute.params.subscribe((params) => {
  if (params['id'])
   campeonatosService.getStageById(params['id'], params['id']).subscribe((test) => console.log(test))
 })

So how do I do this? I need the object that lies inside the /168, so that I can render its results on the screen.

Answer 1

It seems to me your service method getStageById is missing the championship id:

 getStageById(stageId: string) {
 const httpOptions = {
 headers: new HttpHeaders().set("Authorization","Bearer test_potatobearer123")
  };
 return this.http.get(CHAMPIONSHIP_BY_ID_URL + <champId> + '/stages/' + stageId, httpOptions);
 }

All params should be present on the params object of the activate Route. Did you jsut plain console.log it and checked what keys are inside?