html - Component path containing parameter returns all objects instead of just one

Question

Before starting: I know this is quite a lengthy post compared to others, but the problem is at quite a beginner level. My gut feeling tells me that something is going on with the method in the service and how I am using the .filter to get a certain object from the array. I've also tried with .find but with no luck.

I've tried making a new component which, if called by the path app-notedetails/:id returns the Note object only containing the specified id. Instead, it returns all of the note objects and on the UI it shows that all of them have, for example, id 1 (if I put the parameter 1). I've really been battling with it but couldn't figure out what could possibly gone wrong.

These notes are created in note.service.ts and put in an array.

  notes: Note[] = [
    {
      id: "1",
      title: "First note",
      description: "This is the description for the first note",
      categoryId: "1"
    },
    {
      id: "2",
      title: "Second note",
      description: "This is the description for the second note",
      categoryId: "1"
    }
    ];

Inside this service, there is a method called getNoteByID.

  getNoteByID(id:any): Note[] {
    let note = this.notes.filter(el => el.id = id);
    return note;
  }

The id is taken from notedetails.component.ts where the parameter from the url is taken and passed to the method inside the service on initialization.

export class NotedetailsComponent implements OnInit {

  notes: Note[];
  id: number;
  sub: any;

  constructor(private noteService: NoteService, private route: ActivatedRoute) {

  }

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id'];
    });
    this.notes = this.noteService.getNoteByID(this.id);
  }
}

And then the HTML is this:

<div *ngFor ='let note of notes'>
  <p>Id: {{note.id}}</p>
  <p>Title: {{note.title}}</p>
  <p>Description: {{note.description}}</p>
  <p>Category Id: {{note.categoryId}}</p>
</div>

Therefore, why is it returning all notes and why is it assigning them the same ID? (you can see the result here: https://imgur.com/K7BHfHX)

question from:https://stackoverflow.com/questions/65921781/component-path-containing-parameter-returns-all-objects-instead-of-just-one

Answer 1

There is a typo in your code. In the .filter() you have a = which is an assignment and will always resolve to true, but what you need is a === which is a comparison. So your getNoteByID() function should look like the following:

getNoteByID(id:any): Note[] {
  let note = this.notes.filter(el => el.id === id);
  return note;
}

Also, Kshitij is correct in his answer that you really should move the service call inside the router subscription to avoid any unwanted async behavior. I am actually surprised that your code isn't passing an undefined to the service.

ngOnInit(): void {
  this.sub = this.route.params.subscribe(params => {
    this.id = +params['id'];
    this.notes = this.noteService.getNoteByID(this.id);
  });
}