I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called 'Id' that matches the URL parameter 'id'. My goal is to display only the matching object on the page.
Currently, I am using ActivatedRoute to retrieve the active parameter Id, which is working perfectly. But when I attempt to filter by paramsId.id, it results in an empty array. Strangely, if I replace paramsId.id with a known number used as an Id within the array, the filtering works correctly. Additionally, I can log the value of paramsId.id without any issues, but it fails to work within the filter function.
Successful Filter:
return animal.id === 5;
Failed Filter:
return animal.id === paramsId.id;
Below is the portion inside my component ts file:
constructor(private activatedRoute: ActivatedRoute, private animalService: AnimalService) { }
ngOnInit() {
this.animalService.getAnimals().subscribe(animals => {
this.animals = animals;
this.activatedRoute.params.subscribe(paramsId => {
const filteredAnimal = this.animals.filter(function(animal) {
return animal.id === paramsId.id;
})
console.log(filteredAnimal);
});
});
}
Any assistance would be highly appreciated.