Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Web applications need data! Let's get some to work with.
Snippets
Here's the JSON data used in the video
{
"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>"
}
]
}
}
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up