Web applications need data! Let's get some to work with.
Here's the JSON data used in the video
Applications always require data. 0:00 For example, the internet movie database is only useful because it lets you 0:02 access data about movies, actors, and directors. 0:07 Using and 0:11 maintaining data is normally handled by connecting the app to a database. 0:11 To use our flash card application as an example, a data base would store 0:16 the text for the prompts answers and hints for each flash cards. 0:20 For applications requiring a log in user data will also be stored in the database. 0:24 Databases are a big topic though, too big for this course. 0:29 We can still set up a power app to use data and 0:34 hook up database later in the development process. 0:37 In fact developers will always work this way, creating an app to use some 0:40 local data for development and testing, then connecting a database later. 0:45 We can add our flash card data in what sometimes called a flat data file. 0:51 We would put the data that the database would store 0:56 into the that file and load it. 0:59 Let's create a flat data file to provide the app splash card data. 1:01 I'll create a folder called data in the root of my directory, 1:06 and then I'll create a new folder called flashcardData.json. 1:13 Now, I'll just paste in some flash card data I've 1:21 included this snipit in the teacher's notes. 1:26 You can just copy and paste that into your own file. 1:30 This file contains a JSON object with the data property. 1:33 The data property refers to an object with one property called cards. 1:38 Cards is an array of objects that contain each flashcards' data. 1:45 Feel free to change these questions and answers in hints, or add more cards. 1:52 Just make sure not to change the JSON structure or our app won't work. 1:57 Let's pull this data into our card's routes file. 2:03 On the third line, I'll require the data file. 2:07 I'll store the JSONs data property into a constant, named data. 2:20 Then I will go further and install the card data separately. 2:32 I've separated out the cards because the cards will be the main data we will want 2:38 to use. 2:43 If you're not familiar with the ES6 syntax here and here. 2:44 This is just the equivalent of saying cards = data.cards. 2:52 And data, .data. 3:00 It's just more concise this way. 3:09 You can also include JSON directly in Node. 3:13 It reads the text file and then parses the text and coverts it into a JSON object so 3:17 you don't have to call json.parse. 3:22 Let's connect the template to the first question just to be sure it's 3:28 loading correctly. 3:31 In the objects we're passing in to the template. 3:33 I'll point the prompt property. 3:42 To the first card's question property. 3:45 And the hint to the card's hints. 3:54 Now let's look at it in the browser. 4:04 It's pulling in the data, and displaying it. 4:08 That's great, but how will we pull up any card that we want in the browser? 4:11 Let's use a route parameter for that. 4:16 A route parameter is a variable that a user can put 4:19 right into the URL to point to a particular resource. 4:23 For our current URL, we want to place a number at the end 4:27 indicating which card to display. 4:33 Our first one would server like this. 4:36 Our second one would be 1 and so on. 4:40 Right now if i hit Enter, I get a 404 page. 4:44 Let's set up our parameter route to take the parameters like this. 4:49 In express, 4:54 we can indicate a route parameter right here where we declared the URL. 4:55 I can use a colon to tell express the treat this part of the URL as a variable. 5:00 And if I put :id for example Express will treat this 5:06 portion of URL as a variable or a route parameter named id. 5:11 The value for the route parameter from the URL will be stored in 5:16 the request object params property. 5:21 Let's use the ID parameter to access the elements in the card's array, 5:25 I'll replace the two zeroes with references to the value in 5:29 rec.params.id. 5:34 Again, I'm using the id property on the params 5:44 because that's what I called it in the URL above. 5:49 Refreshing the URL in the browser is no longer 404ing and it's working. 5:54 Using URL parameters is a powerful way to access different resources. 6:00 In the next video we'll take a look at another way to use a URL 6:05 to post specific data from a resource called the query string 6:09
You need to sign up for Treehouse in order to download course files.Sign up