Original subtitles

Hello everyone, my name is Kyle, and this is Web Dev Simplified, where we make the web easy to understand and accessible for everyone.

In this video, I'm going to be going over JSON, which is one of the most important concepts that you can learn as a programmer or as a web developer.

I'm going to be going over what JSON is, why you should know it, and all of the syntax involved with JSON,

and at the end of the video, I'm going to go through examples of JSON, so make sure you stick around till the end.

JSON, also known as JavaScript Object Notation, is simply a data representation format very similar to XML or YAML.

It's used widely across the internet for almost every single API that you will access,

as well as for config files and things such as games, in text editors like VS Code, and many, many other places throughout programming.

It's used because it's extremely lightweight to send back and forth due to its small file size,

it's easy to read compared to something like XML, since it's much cleaner and there's not as many opening and closing tags to worry about,

and it also integrates very nicely with JavaScript, since JSON is just a superset of JavaScript,

which means anything you write in JSON is valid JavaScript,

so it integrates nicely with JavaScript, which is used all throughout the web for frontend or backend of web applications.

Also, almost every single major language has some form of library or built-in functionality to parse JSON strings into objects or classes in that language,

which makes working with JSON data extremely easy inside of a programming language.

Throughout your programming career, you're going to use JSON all the time,

whether it's creating an API, consuming an API, or creating config files for you to use or for other people to use for your application.

Now that we understand what JSON is and why it's important,

let's dive into some of the syntax involved with JSON by starting by talking about the types that JSON can represent.

As we know, JSON is a data representation format, so we need to be able to represent certain data types within it,

and JSON natively supports strings, numbers, and these numbers can be in any format,

whether they're decimal numbers, whole numbers, negative numbers, even scientific notation numbers.

It supports booleans, which can be either true or false.

It supports null, which essentially stands for nothing,

arrays, which can be a list of any of the types that we've talked about,

plus the next type, which is the final type of object.

An object is the most complex but most used type within JSON,

and it allows you to represent values that are key-value pairs,

so you give it a key and then a value, and that value can be anything of the other types we've talked about,

string, number, boolean, array, null, any of those different types can be the value for a key.

So let's dive into an example of how to use JSON inside of a file.

The first thing that you need to do is to create a file with the .json extension at the end of it,

so that's .json at the end of your file, and that'll create a JSON file.

Inside of this JSON file, what you do is you take one of the types that we talked about and you put that inside of the file.

So for example, you could put a string, you could put a number, a boolean,

whatever type you want inside of that file, and that's valid JSON.

But if all you have is a single string or a single number,

it's really not very useful to have a whole file for that single input.

So what most of the time when you're working with JSON,

you'll have either an array or an object as your top level of your file,

and then inside of that array or object, you'll have other values,

so it may even have other objects, have other arrays,

or even just individual values such as strings or numbers inside of that.

So let's take an example of a user object that we would want to put at the top level of our JSON file,

which we're going to call user.json.

To create an object, we need to use opening and closing curly braces,

and then inside of that, we'll put all of the key value pairs that make up our object.

In every single one of these key value pairs,

the key must be surrounded by double quotes followed by a colon,

and then the value for that key.

And then if we have multiple key value pairs,

we need commas separating every single one of our key value pairs,

similarly to how we would create an array in a normal programming language.

So for example, if our user has a name, we would surround that name key in double quotes,

put a semicolon after it,

and then we would put the value of our name inside of double quotes as well,

because it's a string and it must be in double quotes,

and then at the end of that, we'll put a comma because we have other key value pairs for our user.

For example, if we wanted to use a favorite number as another property,

we would put favorite number in double quotes,

followed by a semicolon, and then put that user's favorite number.

Then if we wanted to use a Boolean, we use a comma,

and then another property, we would use isProgrammer as our key,

put a colon, and then we would put either true or false with no quotes around it

to signify that this is a Boolean and not a string,

so we would put true or false depending on if that user was a programmer or not.

We could then go down and use hobbies as our next key value pair,

so put hobbies in double quotes, semicolon,

and then to create an array, we use opening and closing square brackets,

and inside of the array, we put whatever type of value we want,

and in this case, we're just going to use strings for the different hobbies.

So we'll put those strings inside of double quotes,

and we'll put commas between each one of them

because we put commas between all the values in an array when we're writing out JSON.

Next, we could have another property that will be an array of friends,

but instead of putting strings inside of this array,

we're going to put more user objects inside of that array,

so we can put different user objects inside of that array,

and now we have nesting of arrays with objects,

and that's how you really get into the power of JSON,

where you can start to deeply nest different properties

and really show a hierarchy of data

as opposed to just a flat format of data like most data format files give you.

So for example, for this friends array,

we could have a friends array and it could have the same properties of name,

favorite number, is programmer, hobbies, and even friends inside of that,

and you can start to get a very deeply nested array if you really want it.

Then we just have to make sure that we don't put a comma

on the very last property value key pair that we have,

close it with a curly brace, and that's our full JSON file created.

Now that we understand what JSON is

and the syntax involved with writing JSON,

I'm going to jump into a live example of me writing a JSON file

and then parsing that file in JavaScript.

So I have Visual Studio Code open

and I'm inside of a file called companies.json,

where we're going to store an array of different companies,

and each of these companies is going to have a name,

number of employees, a CEO, and their rating out of five.

So let's get started by using our syntax for creating an array,

which is to use an opening and closing square bracket,

and inside of this array we're going to store different objects.

So our first object is going to be our first company,

which as we mentioned has a name,

and we're just going to give that company a name of big corporation,

and then we put the comma at the end of the row.

We want to give it number of employees as well.

And then this number of employees for this big corporation,

we're going to say that they have 10,000 employees.

Then we want to give them a CEO,

and their CEO's name is going to be Mary.

And then lastly, their rating out of five stars is going to be a 3.6.

And now we want to store a second company in this array,

so we just put a comma at the end of our first company object,

open up a new object, and then give it the same properties.

So we'll say name,

and we're just going to give this one the name of small startup.

Go down to the next line.

We got number of employees.

In this case, they're just going to have three employees

since they're a small company.

CEO is next,

and this company does not have a CEO because they're so small,

so we're just going to put null here,

which is okay to have different types inside of your JSON object

because JSON doesn't care what types your different keys are.

It just matters that you have keys and values.

So we have null here.

And then lastly, we're going to give them a rating.

Make sure to put that in double quotes.

And their rating here is just going to be 4.2 or 4.3.

And there we go.

That is our entire company's JSON object.

And as you see, we have no errors.

But if we, for example, didn't put the quote here,

you see that we get an error,

and that's because we're using VS code,

and it tells us when we have errors inside of our JSON.

So we know that our JSON is always going to be correctly formatted,

just like this is here.

Now it's looking up this index.html file here,

which is just a super simple file

that has an opening script tag

so that we can put some JavaScript in here to run on our page.

So let's create a variable.

We're just going to call it companies.

And we're going to copy everything from this companies.json,

because as I mentioned at the beginning of the video,

JSON, anything in JSON, is valid JavaScript.

So we can take this JSON directly

and just paste it into our companies variable,

and then if we go down here

and we log the companies variable,

and we check that out inside of our browser here,

as you can see, we have logged this companies variable,

and we have both parts of our array.

We have CEO name, number of employees rating,

and all of this is the information that we have in this file here

that we copied over into our JavaScript file.

And same thing down here, we have our other company.

But most of the time, when you're dealing with JSON,

you're going to get it back as a string

and not as an actual JavaScript object.

So to emulate that, let's surround this in back ticks,

so it's an actual string.

And if you save that, you'll see that now,

our console just has a string instead of an actual object,

and we can't actually use this object inside of our JavaScript.

So in order to convert this JSON string into a JavaScript object,

we need to use what's called JSON.parse.

So if we go down to our log, and we say JSON.parse,

and we pass it in a string, it'll take that string

and convert it into a JavaScript object.

So now, as you can see, in here, we have our JavaScript object

that we created from this string here using JSON.parse

to get a JSON object right here.

And we can use this inside of JavaScript.

For example, if we wanted, we could get the first company

inside of that array, and we could get their name.

And now if we save that, you'll see it prints out the first company's name.

You get the second company's name, prints it out, and so on.

And you can do anything that you can do with a normal JavaScript object

to this newly parsed JSON object that we created with JSON.parse.

So I hope this video was useful for you.

As you can see, the actual format for JSON is fairly straightforward.

You just have to mostly remember to use double quotes

around all of your different keys, because in JavaScript,

you don't need double quotes, but in JSON, you do need these double quotes.

Other than that, it's very straightforward.

It's easy to read, which is great, because just looking at this,

you can tell what it's representing, and you can tell what the different keys

and values mean, and it's extremely lightweight.

So when you send it across the internet through different APIs,

it'll take up very little amount of space, which means it'll quickly send

back and forth, which gives your user a great end experience.

So thank you guys very much for watching.

You now know everything you need to know in order to use JSON

and consume JSON in your future projects.

If you guys enjoyed this video, please make sure to leave me a like down below

letting me know, and subscribe for more tutorials similar to this.

Also, let me know down in the comments below what other style tutorials

you'd like me to cover, similar to this one, in as short a manner as possible.

Thank you guys very much for watching. Have a good day.