- Introducing the Project 1:43
- AJAX Callbacks 6:51
- Review AJAX Callbacks 5 questions
- Create a callback 1 objective
- Check for the correct ready state 4 objectives
- Introducing JSON 5:52
- Review JSON 5 questions
- Create a JSON file 4 objectives
- Finish the JSON File 1 objective
- Parsing JSON Data 7:33
- Processing JSON Data 7:48
- Programming AJAX Challenge 1:52
- Programming AJAX Solution 2:51
- Review Parsing JSON 3 questions
Preview
Video Player
00:00
00:00
Parsing JSON Data
7:33JSON is transmitted over the web as plain text. To make it useful for a JavaScript program, you need to parse it, or convert it from a string to JavaScript.
Now we know more about how callbacks work and what JSON is.
0:00
Let's get to work on our employee status
widget.
0:03
Okay, with Ajax the browser sends out a
request to
0:06
the web server and the web server sends a
response.
0:09
The response is just plain text, even
though the server
0:13
sends back information that looks like
HTML, XML, or JSON.
0:16
To a web browser those responses are just
a string of characters,
0:21
in other words, even though JSON is
formated to look like JavaScript,
0:25
it isn't JavaScript, It's a plain text
string, just a bunch of
0:29
letters, numbers, and punctuation marks
with
0:34
no magical significance to your web
browser.
0:36
In order to use JSON data, we need
0:39
to take the string and convert it into
JavaScript.
0:42
This is a process known as parsing.
0:46
Fortunately, it's really easy to do.
0:48
All current web browsers can do it using a
single command.
0:50
Alright let's get started with our
employee status widget.
0:55
If you want to follow along you could
launch the workspace on this page.
0:58
It has all the files you'll need.
1:02
Open the files index.html and widget.js in
the JS or JavaScript folder.
1:04
The widget.js file is empty.
1:11
We'll add our programming here.
1:13
We start by creating an XMLHttpRequest
object.
1:16
This new variable xhr
1:22
holds the XMLHttpRequest object, which
1:24
has its own set of properties and
functions.
1:28
Functions of an object are also called
methods.
1:32
Remember that the variable name doesn't
have to be xhr.
1:35
You can name it anything you want.
1:37
Step two is our callback function.
1:41
We start with the "readystatechange" event
and
1:44
we add our function, or callback, to it.
1:48
Because there are several different ready
states, we need to make sure that we're
1:54
at state four when the server has returned
all the data it will send.
1:57
This lets us make sure we've received all
of the JSON data.
2:02
This is just the basic skeleton for the
call back.
2:07
It doesn't do anything yet.
2:09
We'll add the program for that in just a
moment.
2:11
Step three is opening a request.
2:15
In this case we're using the get method to
2:18
load a file filled with JSON data named
employees.json.
2:20
It's located in a folder named data.
2:26
Now in a real world application, we'd
point to a server side script that
2:29
would dynamically generate this JSON data
with
2:32
the most current information on our
employees.
2:35
For this exercise however, we'll use a
plain text file.
2:38
Step four, send the request.
2:42
This step sends out the request.
2:45
Remember that even though we set up the
call back in step two.
2:48
The call back function doesn't do
anything, until after
2:51
we send the request and receive the full
response.
2:54
In fact, you could add the programing for
the callback function after
2:58
this step if you wanted to, and the
program would still run fine.
3:01
Now, let's look at our call back function
in more depth.
3:06
The information that the web server
returns
3:09
is contained in a property named response
text.
3:11
It's a property of our XMLHttpRequest object,
so we access it using the syntax
3:15
xhr.responseText.
3:23
Let's look under the hood by using our web
browser's console.
3:27
I'm going to add a line of code in
3:30
the callback that prints out the response
to the console.
3:32
Gonna save this file.
3:36
And to run this script, we need to link it
to our web page.
3:38
So, move over to the index.html file and
add a pair of script tags.
3:41
I'm gonna view this in a web browser and
open it up
3:49
in the console so make sure to save this
page and preview it.
3:52
In Chrome you open the console from the
settings menus or the
3:56
keyboard shortcut control shift J on
Windows or command option J on Macs.
4:00
Other browsers also have JavaScript
consoles.
4:05
See the teacher's notes below for a list
of keyboard shortcuts for other browsers.
4:08
When I reload this page, see that
4:13
the contents of the employees.json file
appears.
4:14
It looks a lot like JavaScript but it
isn't.
4:18
We can see this easily by logging out
another bit of information.
4:21
The JavaScript type of operator looks at
the item that is listed next.
4:28
In this case, xhr.reponseText and returns
a word
4:32
indicating what type of JavaScript element
it is.
4:36
Let's save this file and preview our page
again.
4:40
Let's see what it says.
4:42
Hey, it says the response is a string.
4:46
We can't access the bits and pieces of the
data like individual employees
4:49
names or their status when it's in a big
long string like this.
4:53
We need to turn this string into real
JavaScript and here's how.
4:57
Let me remove these two lines of code to
clean it up a bit.
5:02
I'll declare a new variable, and this
variable will hold the
5:05
JavaScript version of our JSON data in an
array of employees.
5:09
[BLANK_AUDIO]
5:13
JSON.parse is a method that's built into
all
5:21
current web browsers, even back to
Internet Explorer 8.
5:24
The JSON.parse method takes a string and
5:28
tries to convert it into a JavaScript
object.
5:31
In this example, the text response we get
from the
5:34
server is a JSON formatted string from the
employees.json file.
5:37
Remember that JSON formatted data must be
an array
5:42
of items or an object full of key value
pairs.
5:45
Or a combination of those two.
5:49
In addition keys in JSON formatted objects
must have double quotes.
5:51
And string values must have double quotes.
5:56
The JSON.parse method won't work unless the string is formatted as correct JSON.
5:58
If you try to parse a regular old string
like, "this
6:05
is a string" using JSON.parse, you'll end
up with a JavaScript error.
6:08
When the JSON.parse method is complete, it
returns a JavaScript object.
6:12
Let's look at this in action.
6:19
I'll send some information to the console.
6:20
First let's see what type of element the
employees variable is.
6:23
I'll save this and preview the page.
6:29
The browser tells us that it's an object.
6:33
That's because the JSON.parse method
converted the
6:35
text into a JavaScript array of elements.
6:38
It's no longer a string of characters, but
an
6:41
array of items that we can manipulate with
JavaScript.
6:43
Unlike other programming languages,
6:47
arrays are considered a type of object in
JavaScript.
6:49
Now let's see what's inside this variable.
6:54
I'll save this file and let's preview it
again.
6:58
And when we preview this we can see that
employees is
7:00
an array, you can tell by the brackets on
each side.
7:04
And inside the array is a list of objects.
7:07
I can click on the array to see what's
inside it.
7:10
Then click on an object to see what its
key value pairs are.
7:12
We've successfully created a script that
loads a JSON
7:17
file and parses it to create a true
JavaScript object.
7:19
In the next video, we'll finish the callback function for this project by going
7:23
through the array of employee objects and
generating the HTML to add to our page.
7:28