When receiving a response from the API without an ID, it presents data fields like url, name, gender, culture, etc. However, I need to create a route to access specific character information using /characters/:id. Since there is no direct ID provided in the response, I plan to extract it from the URL of the character.
The URL structure looks like this:
https://www.anapioficeandfire.com/api/characters/38To accomplish this, I intend to retrieve the ID from the URL dynamically. My approach involves utilizing Angular's *ngFor directive to iterate through characters and generate corresponding router links based on their IDs.
<p>Characters:
<ul>
<li *ngFor="let character of characters | async">
<a [routerLink]="['/characters', getCharacterId(character)]">{{character.name}}</a>
</li>
</ul>
</p>
Next steps involve defining a function called getCharacterId() that extracts the necessary ID from the URL:
getCharacterId(character: Character) {
return character.url.substr(character.url.lastIndexOf("/") + 1);
}