Submodule 21.2: Single Page Applications - Practice

Now update the dishService to return a specific dish as follows:

getDish(id: number): Dish {
  return DISHES.filter((dish) => (dish.id === id))[0];
}

Here we use the filter JavaScript method to create a new array.

We use arrow function to select the elements from that array that match the criteria that we have specified. In this case, the criteria is that dish.id should be equal and of the same type with id. Each Choco-dish has a unique id ( you can find it at dishes.ts) and thus every time that we click on a Choco-dish, they will be only one Choco-dish that will fulfill our criteria, thus the array will have only one element. However, we use [0] to specify that we want the first element of the array in order to be prepared for more complex situations. 

So this way, we will extract out that specific Choco-dish from this array and then return that dish from this getDish method.