Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
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