I am just starting out practicing angular and ran into some problems with my code. I have created mock data and placed it into a db.json file to use on my web app. On my web app I have 2 pages that get routed home page(page that displays grid) and details page that uses the id data to display information related that id(gets the id from url). My home page works displays all the data that it gets from the json file. My details page comes up blank and doesn’t display anything even though in my url it says the id number. I have pictures and code snippets below.

My home page:
enter image description here

My details page:
URL: localhost:4200/Details/0
enter image description here

code for home page

async getAllCharacters(): Promise<Info[]> {
const data = await fetch(this.url);
return await data.json() ?? [];

}

constructor() {
this.characterService.getAllCharacters().then((characterInfoList: Info[]) => {
  this.characterInfoList = characterInfoList;
});

}

code that displays details page

async getCharacterById(id: Number): Promise<Info | undefined> {
const data = await fetch(`${this.url}/${id}`);
return await data.json() ?? {};

}

constructor() {
const characterInfoId = Number(this.route.snapshot.params['id']);
this.characterService.getCharacterById(characterInfoId).then(characterInfo => {
  this.characterInfo = characterInfo;
});

}

I have been stuck on this and not sure why the home page would work but the details page doesn’t. If someone can help and explain the issue that would be great. Thanks in advance.