Scribd
Upload
9 views2 pages

Task 81

The document provides instructions for an in-class task to display data from a database in the view layer of an app. It involves installing request, making API calls, and rendering data on pages using Pug templates. Code snippets are provided to fetch a list of items from the database and display it, and to fetch and render a single item.

Uploaded by

akhilmanual3030
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views2 pages

Task 81

The document provides instructions for an in-class task to display data from a database in the view layer of an app. It involves installing request, making API calls, and rendering data on pages using Pug templates. Code snippets are provided to fetch a list of items from the database and display it, and to fetch and render a single item.

Uploaded by

akhilmanual3030
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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