So in the last lesson, we saw that when we made a request to our API and when we got our data back that
it came back in the format of a JSON.
So who is JSON?
Unfortunately, it's not this JSON.
The better question is actually what is JSON?
And JSON stands for JavaScript Object Notation.
So what is it?
It's a way to format data that can be sent over the internet in a readable but also efficient way.
And as the name suggests, it's structured after a JavaScript Object.
So we've seen previously that you can create JavaScript objects with key and value pairs,
you separate them with a colon and you can have multiple properties in each object simply by adding
a comma after each line.
You can also have arrays inside your object and you can nest an object inside another object.
And it's just a really good way for us to be able to structure complex pieces of data.
Now, if you compare this JavaScript object with a JSON, you can see it looks pretty much identical.
The structure is completely, the the same.
The only thing that changes is the keys,
instead of being a JavaScript key which doesn't actually need any quotes around it at all, it's now
turned into a string.
So every key is a string and the value can be strings, it can be numbers, it could be arrays and it
could be any of those things.
And once a JSON is laid out properly like this, you can see it's very readable
and it's easy to understand that
in terms of Jack Bauer's education, he actually has two degrees, one from UCLA and one from UC Berkeley.
So the key difference is that a JSON is serialized into a string,
as for most of the cases, when you're encountering JSON's it's because some piece of data is being
transferred across the Internet, whereas a JavaScript object has a much more relaxed kind of notation
because it can be interpreted by the editor or by the code interpreter.
And the idea is, let's say you go to your favorite furniture store and you want to buy a wardrobe for
your bedroom.
Now that wardrobe would probably be structured like this if it was in fact a JavaScript object.
So it would have the number of doors specified as properties, number of drawers, and color,
and this is a very simple JavaScript object.
Now what if you wanted to move that wardrobe to your house and you want to go from the furniture store
to your house?
Well, it's not that easy to tie a big wardrobe to the roof of your car,
I've tried that,
don't do that.
But it is much easier if that wardrobe came in a flat pack.
So it could be reduced down to its minimal size without all of that air in the middle,
so you don't have to transfer a large object. That is the genius behind IKEA, but also it's the genius
behind JSON's, because instead of that large JavaScript object, we now have a flat pack in the form
of a JSON.
It is a string from the beginning to the end, and every single aspect of that notation is serialized
so that it can be its minimal size when transferred across the internet.
The syntax keeps all of the meaning and then when it gets transferred to the other side and when it
needs to be used, it can then be re-expanded into a usable format such as a JavaScript object.
When you get a complex JSON sent to you, it's usually in a format that's really difficult to read as
a human because it's in its flat pack notation.
And so to make it more human readable, you can use something called a JSON Visualizer and one that
I recommend that's free to use on the internet is at jsonviewer.stack.hu and you can simply paste
in your JSON as text and then you can go to the viewer tab to view it in a way that's more human-intuitive.
So you can see this JSON has three objects in the initial array, and this is a JSON that represents
three recipes for different types of Tacos: Chicken Taco, Beef Taco and Fish Taco.
And within each of the recipes you can then expand the ingredients to see the protein, the salsa and
the toppings.
Now the toppings is further subdivided into different objects in the array.
We've got Lettuce, you've got Cheese, and you've got Guacamole and Sour Cream.
And you can see how this kind of deep nesting makes a lot more sense when we can expand and contract
using a JSON viewer,
but when it's simply flat packed, like how it would be transferred, then it's really difficult to
see exactly what's going on as a human.
Although, maybe you have more superpowers than I do, and this makes total sense to you,
but for most of us, this is a lot easier to understand and visualize.
When you're writing code and you want to send a JSON across the internet, for some reason you will
need to perform what's called serialization,
turning a JavaScript object, your big wardrobe into a JSON, into a flat pack.
And the way you do this with code is using a method from the JSON module and you would write something
like this "JSON.stringify ('and then in here you put your JavaScript object'). And what it's going to
do is essentially that flat packing process.
It's going to make this JavaScript object into a string, but a string that has kept all of the commas
and quotes and colons to be able to represent all of the different nesting and relationships in that
object.
Now the opposite direction when you want to unpack a JSON, when you are back home and you've got your
flat pack and you're ready to assemble your wardrobe, this process is done using another JSON method,
which is called parse.
And inside here is where you put your JSON,
And once you run the parse method, it turns this JSON back into a JavaScript object. So you can handle
it just as you would with any other JavaScript object.
You can write something like data.ingredients and then you would be able to access that property
just as if it was a normal JavaScript object.
Let's practice some of this in an exercise.
Download the zip file from this current lesson, 5.2 JSON.zip.
And once you've extracted and opened it inside VS Code, you'll see that I've included the recipe I showed
you earlier in the format of a complex, deeply nested JSON.
This is what you would see if you go into the recipe.json and again, you can copy it and put it into
the JSON Viewer to be able to see its structure a little bit better,
but you can also see it in its really flat-pack condensed format
if you go into the index.js. And you can see the recipeJSON simply as one long string taking up very
little space and as you can imagine, easily transferred across the internet.
The challenge for you is to build a website where we use this JSON data to show people how to make these
different types of tacos.
So the website is called Taco Town, and the first thing I want you to do is to cd into your project
folder and then build the node modules using the "npm install" command.
Once you have done that, I want you to go ahead and use nodemon to run the solution.js file and
then you can see it in localhost.
You can see we've got this beautiful Mexican website where we can teach people how to make different
types of tacos.
You can pick your favorite taco ingredient minus fish and it will show you what goes into a Fish Taco
with all of the ingredients laid out.
This is the end result that we're trying to build, and we're doing this by utilizing that complex JSON
that we've got in here called recipeJSON.
So I want you to go through each of the steps one by one to complete this challenge.
First step, hopefully you've already done.
Take a look at what the final solution looks like.
Don't look inside the solution.js or solution.ejs because those are the answers,
instead, use the index.ejs and index.js files.
But in order to complete the challenge, we need to use some of that knowledge.
We learned about JSONs and some of the tools that we've learned for how to deal with JSONs.
So once you've familiarized with the structure of the JSON, the goal is to write some code in the app.post
so that you can make this website behave like the solution website.
So what happens when I click on each of these buttons is we get a POST request being sent to the recipe
route, right here and it'll be caught within these curly braces.
Now, you have to think about what to do when that request comes through and how to handle it, because
depending on the button that the user pressed, it will have a different value being sent over which
you can access by using the body-parser middleware.
Hopefully, this is all familiar to you. If you've skipped some of the previous modules on EJS and Express,
then this might seem confusing,
so go back there and make sure you've completed those lessons, and have a think about what you need to
do in order to process the request that comes through, and how to grab the necessary pieces of data from
the recipeJSON, and how you can send it over to your index.js.
Now, once the data gets sent in here, you need to figure out if there is data being sent over, then
show all of the ingredients, but otherwise just show an h2 that tells people to pick from one of the
options.
Now in the ingredients list, we're going to need to show people the protein name, the protein preparation,
the salsa name, and every other topping.
And remember, if you look inside the json, you can see this is the protein name, protein preparation,
salsa,
and then the toppings are a series of items inside an array.
You need to be pretty familiar with how to work with JavaScript arrays, how to work with JSONs, how
to turn a JSON into a JavaScript object so that you can send it over here and process it.
But essentially this is the final outcome you're trying to achieve and I recommend coming back here
frequently to figure out if your version matches the final version.
And just in case you're interested, which I'm sure a lot of you are, this beautiful Mexican background
I got by going to pattern.monster, where you can generate different patterns in CSS or SVG for use in
your website backgrounds.
And I simply searched for a Mexican background and simply randomized it until I found one that I liked
and I copied the CSS in order to use in the main.css.
That's the challenge.
Pause the video.
Give this a go now.
All right, let's run through the solution together.
The first thing that we needed to do was to review what the solution looked like, review what the JSON
is structured like, and then we can go ahead and complete the app.post.
When we get a POST request, we're able to tap into the req.body because we're using the body-parser
middleware. And what gets sent over is the choice that the user made
when they clicked on one of these buttons.
You get something that has a key of choice and a value of whichever one of these buttons they clicked
on chicken, beef or fish.
So using that knowledge, we can simply write a JavaScript "switch statement" to check which choice they
made,
i s it chicken, beef or fish?
And then we can send over the relevant piece of data.
If we take a look at the structure of our data, we can view it in the JSON Viewer.
You can see that there are three objects that we can get hold of and each representing a different recipe
chicken, beef or fish.
All we need to do in our POST request is to parse that JSON,
remember, this is the process where we can turn our flat-pack JSON into an actual piece of JavaScript
object, which is in our case the full wardrobe.
We put the recipeJSON in here, which could be from a third-party API. For simplicity's sake,
I've simply included it here as a const so we don't have to deal with the requests that we're going
to learn about in the coming lessons.
But once we get hold of our JSON, we parse it into a JavaScript object and then depending on the choice
the user made, we pick the item out of that JSON, just as if it were items in a JavaScript array.
And then we set that data and we send it over when we render our EJS file. At the bottom here we've got
our res.redirect which is going to go into the app.get and it's going to send over the data under the key
of recipe.
And then going into our .ejs file we can pick up that recipe and check to see if it exists.
If it does exist, we're going to show the recipe name and all the ingredients, but otherwise we're
simply going to show them this h2 that asks them to pick one of the buttons.
This comes from our EJS knowledge and more importantly, we're parsing the data that we're getting hold
of from that recipe in order to include it in different parts of our ingredients.
If we zoom in on one of these items that gets sent over, we know that when I click on this chicken
button, it's going to send over the chicken recipe in its entirety,
and this is essentially the recipe object.
So if we tap into recipe.name, we'll be able to get the Chicken Taco name, which goes into the
h2.
And then in the ingredients list, the first thing we wanted was the protein and the protein preparation.
So if we zoom in on the ingredients, we've got the protein, got the name and preparation.
This first list item consists of recipe.ingredients.protein.name, and that is how we manage
to go from recipe, which is what gets sent over to the .ejs file to ingredients, from ingredients to protein,
from protein to name, and also to preparation.
So recipe.ingredients.protein.name is how we can get hold of this piece of data.
And because we sent over our JavaScript object, we can drill down through the object exactly like so.
That's how we dealt with the protein name, protein preparation,
and then we have our salsa name and then we can use a forEach loop in order to loop through each of
the toppings.
Because notice here, denoted by this little different symbol, this is not an object, this is an array
of objects.
We can loop through each of the toppings and get hold of the quantity and name so that we can display
it here.
One cup of Lettuce. Half a cup of Cheese.
By looping through each of the toppings, we can create a li loop for the topping quantity and the topping
name.
If this part was what tripped you up or was difficult, then be sure to review the EJS module where we went
into this in a lot more detail.
But hopefully, with a lot of hard work and perseverance, you managed to get your website to work and
you now have a Taco Town website.
And hopefully, in the process, you've learned a bit more about how to view JSONs, how to convert JSONs
into a format that we can use and pass around in our code and how to drill through the JSON for the
relevant pieces of information that you want to display.
In the next lesson, we're going to be talking more about how to make requests from our server-side
to an external API so that we can interact with third-party APIs straight from our server back end.
So for all of that and we'll, I'll see you on the next lesson.