We need to get the majprs to appear in the page so that the user can click a category to filter the products. We can add this to the same component, so the following code can go in the products-list.js file.

1. Add another variable near the top of the file that holds the path for the GET categories operation:

   var categoriesApi = '/api/categories';

2. Add a model object to data that will hold the list of catgories:

   products: new Array(),
   categories: new Array()

   We included the existing products model to show you that you need to use commas to separate the models. Don't just blindly copy and paste this code --- modify your existing code to match.

1. Add another function to methods that will get the categories. Copy the existing getAllProducts function and adapt it to suit. Make sure that you add a comma to the end of the previous function since commas are used here to separate the functions.

2. Add another call to mounted that calls the new function to load the categories when the page loads.

   1. Back in the products page, find the HTML that adds the categories to the page. Modify the first item (whether it is a button or link) as follows:

      <button v-for="cat in categories">{{cat}}</button>

      If you used links instead of buttons, then this would be the same but using <a> tags instead of <button> tags.

      This is the same technique that we used for the products. We use v-for to repeat the tag as many times as we need, and a template (the double curly braces) to display the values.

   2. Remove any other dummy categories that you have added (keep the All category since we still need that).

   3. Reload the page in the browser. You should see the categories.