[MUSIC]
>> My name is [inaudible].
I'm a Senior Cloud Advocate at Microsoft, and today,
I want to talk to you about
JavaScript Object Notation or JSON. Lets get started.
Set some context for why you need JSON.
Let's first think about JavaScript objects.
Here, you have a very simple example of JavaScript object,
and if I were to just print that out and look at its type,
you can see it's an object with two properties,
title and author, and I actually printed out to the Console,
you can see that title is the name and the value,
1984, and George Orwell, our strings.
Great. Nothing new there.
Now let's think about collections of objects.
It's actually very similar.
If I were to do this again,
now we can see that by printing out
the contents of an object collection, in this case, an array,
that really is an array of objects,
each of which is a collection of name value pairs.
All of them have the same properties,
they just have different values.
Simple. Here comes the issue.
Let's say you actually want to use this data
for some request you need to make over the network.
Maybe there's a library API that you need to hit,
and this is the data you need to give to let
the library know that the users checked out these books,
or you might want to store to your file system.
Turns out that many of these file
transfer and communication protocols
require request response messages to be in text format.
So we need some way to take this data from JavaScript,
and convert it into strings or text format that can be
used in messaging over
the network or in transfers to a file system.
This is where JSON comes in.
You're very lucky because JSON
just has two methods you need to know.
The first one is called Stringify.
Let's take a look at what that does
and then we'll talk a little bit about it.
In this bookJSON, is effectively giving
you the result of JSON.stringify called on the book object.
In effect, JSON.stringify, is a method that takes
an object and returns back a stringified form of it.
You can check, when you look at the type of bookJSON,
it's a string, and when you print it out,
you can see that it's effectively nothing more
than a list of name value pairs,
but both names and values are stringified.
So effectively this in complete text readable format.
Guess what? I don't even need
a different method call if I'm using an array.
It's the exact same format.
Let's try this up.
I just called JSON.stringify on the myBooks object,
which is effectively an array or a collection of book objects,
and I have a stringify
flattened format of the contents of that array.
You can see here that the stringified format
effectively represents the array,
and then the individual objects in the array separated by commas,
just as you would expect.
The most important thing about JSON as
you can see, it's user readable.
You can look at this and even if you didn't know
anything about the program,
you could understand that this is a collection of books.
This is great. You're able to now take
JavaScript objects or collections of
objects and flatten them into a single string,
that contains all the data and those objects.
But what if you wanted to do the reverse,
like once you've got it in JSON,
how do you get your objects back?
That's why you need to know of method number two,
and that is called JSON.parse.
Let's take a look at what that does.
In this case, all I've done,
is I've taken the string that we got
in the previous method when we stringified an object,
taken that string and,
you could have gotten the JSON string from anywhere,
and given it to the JSON.parse method,
and then inspect whatever it is that we get back as a result.
In this case, first of all,
let's log what we get back as a result and you can immediately see
that you get back the exact object that we hit "Parse for book".
It's title, author, and the values for those two properties.
Second, I did a call to see array is array parse which is
effectively checking to see
if this returned object is an array, and it's not.
Which makes sense because it's a single object.
Third, I looked at how many items were in there,
and since this isn't an array, this is undefined.
Perfect. Why did I do all this?
Because guess what?
The one thing about JSON dot parse is you
don't need to know the string coming in.
You don't need to know ahead of time,
whether it comes from a stringified form
of an object or stringified form of a collection.
It's going to be the exact same call.
Let's try this out with the array.
In this case, what we're doing is we're parsing myBooksJSON,
which if you remember,
was obtained by stringifying a collection.
So effectively it's a string that
represents a collection of objects.
Just parse it to the exact same method.
Now when we call these methods,
let me scroll this up so you can see all the data.
When we actually call this, you can see,
that the data that it returns is in fact
the array of objects that was serialized in the first place.
When you do an array is array,
you see that it comes out to be true.
The number of items tells you that there are four.
In effect, that string that you had is now been
de-serialized back into an array
of objects that you can now work with in JavaScript.
This is all you need to know,
JSON.stringify to convert objects into JSON strings,
whether they be single objects or collections,
and JSON.parse to not take that stringified format and revert it
back into either an object or
an array based on what you are packing in the first place.
I'll just leave you with one final thought.
This is just looking at very simple objects you should
play with a little bit more in terms of examples.
But let's say you wanted to take data
from an object that had both properties and functions.
You can still serialize into JSON which will serialize the data,
and then revert it back into the object.
At that point, you could have written
object constructors that let you take JSON data and
reinstate the object with
the additional functions and everything defined
in there and only the data initialized.
That's all I had to say about JSON.
I hope this was interesting.
Look out for the next demo video. See you.