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 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
[Music]
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
javascript which is used all throughout
the web for front end or background 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 so 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 dot json
extension at the end of it so that's dot
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 just 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 the
key value pairs that make up our object
and 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'd surround
that name
key in double quotes put a semicolon
after it and then we'll 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 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 is programmer 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'll be an array of friends but
instead of putting strings inside 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 friend's array and it can
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
over a if you really wanted
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 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 married
and then lastly
their rating out of 5 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 arrow 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 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 company's variable and we
have both parts of our array we have ceo
name number of employees rating and all
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 backticks 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 jason 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 we could get
their name
and now if we say 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 could 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 the 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 much 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 thank you
guys very much for watching have a good
day