Newer
Older
labs / tiddlers / content / labs / lab09 / _Labs_09_Display the Majors.md
We need to get the majors to appear in the `view-students` page so that the user can click a major to filter the students.

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

    ```javascript
    var majorsApi = '/api/majors';
    ```

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

	```javascript
	students: new Array(),
	majors: new Array()
	```

	We included the existing `students` 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.

4. Add another function to `methods` block that will get the majors.  Copy the existing `getStudents` 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.

5.  Add another call to `mounted` that calls the new function to load the majors when the page loads.

 4. Back in the students page, find the HTML that adds the majors to the page.  You can remove that code --- it will be easier to start from scratch.
 
5.	Replace the code with the following:

	```html
	<div class="majors"><button v-for="major in majors">{{major}}</button></div>
	```

    This is the same technique that we used for the students. 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.
	 
	 The `div` is there to make it easier to centre the buttons --- if you set the `text-align` style to `center` for the `div` then the buttons should be centered.

 6. Reload the page in the browser. You should see the majors.