Using Data and Route Parameters

Author: codingChewie

data/flashcardData.json

@@ -0,0 +1,32 @@
+{
+  "data": {
+    "title": "JavaScript Flashcards",
+    "cards": [
+      {
+        "question": "What language are Express apps written in?",
+        "hint": "It starts with a \"J\"",
+        "answer": "JavaScript"
+      },
+      {
+        "question": "What is one way a website can store data in a user's browser?",
+        "hint": "They are delicious with milk",
+        "answer": "Cookies"
+      },
+      {
+        "question": "What is a common way to shorten the response object's name inside middleware?",
+        "hint": "It has the same abbreviation as \"resolution\"",
+        "answer": "res"
+      },
+      {
+        "question": "How many different values can booleans have?",
+        "hint": "Think: binary",
+        "answer": "2"
+      },
+      {
+        "question": "Which HTML element can contain JavaScript?",
+        "hint": "It starts with an \"s\"",
+        "answer": "<script>"
+      }
+    ]
+  }
+}

routes/cards.js

@@ -1,12 +1,23 @@
 const express = require('express')
 const router = express.Router()
 const eyes = require('eyespect')
+const { data } = require('../data/flashcardData.json')
+const { cards } = data
 
-router.get('/', (req, res) => {
-  eyes.inspect(res.locals, 'res.locals')
+router.get('/:id', (req, res) => {
+  res.render('card', {
+    prompt: cards[req.params.id].question,
+    hint: cards[req.params.id].hint,
+  })
+})
+
+// Sample testing req.params
+router.get('/:foo/:bar', (req, res) => {
+  eyes.inspect(req.params, 'req.params') // http://expressjs.com/en/api.html#req.params
 
   res.render('card', {
-    prompt: `Who is buried in Grant's tomb?`,
+    prompt: cards[req.params.foo].question,
+    hint: cards[req.params.bar].hint,
   })
 })