You are on page 1of 2

In-Class Task 8: Displaying Data in the View

1. Open NPM in the directory you have been using for the previous tasks
2. Open app_server/controllers/food.js
3. Remove the old code, except for the exports at the bottom
4. Install 'request' into your application by running npm install --save request
5. Add the const request = require('request'); to the top of food.js.
6. On the second line, create the apiOptions constant like this:
const apiOptions = {
server: 'http://localhost:3000'
};
7. Modify the module.exports so the favouriteFood is now foodInfo
8. Add the following code snippets to create functionality to display a list from the database:

9. Add the following code snippet to create the rendering of the home page:
10. Add the following code snippets to create functionality to display a single item:

11. Open app_server/routes/index.js


12. Modify the route pointing to ‘/’ so it passes the foodlist controller instead of index
13. Add a new route for ‘/foods/:foodid’, which passes the foodInfo controller
14. Comment out the router.get for '/list' and '/favourite' as these are now the home page and
the foodInfo page.
15. Open app_server/views/foodlist.pug
16. Modify the li so it just displays a link pointing to `/foods/${food._id}` and the food’s name, for
each food in foods
17. Create a new file called food-info.pug
18. Display currentFood.name and currentFood.type inside p tags
19. NPM start and verify that your app is fetching the data from your database and show your
professor

You might also like