JSON Basics
Transcript
hi everyone so we're going to pick up
for your assignment we're sort of where
we ended up in class today which is
talking about JSON JSON again is
JavaScript object notation this is a
data format that is very common on the
web it's often used to distribute what
we would think of as feeds of data so
that's going to be data from web
applications things like social media
but also as we're going to see shortly
it's basically a place where a single
URL you're going to get data that
updates on a regular basis and that gets
overwritten in that same place right so
we're going to look for example at Citi
bike data and we'll see that at any
given time it's actually updated about
10 second intervals that at any given
time it's going to show us the current
state of the system but it's not showing
as historical data and obviously not
showing us future data and this is in
contrast what we usually see with CSV
files with txt files which tend to show
us things that have already happened
right so when we see CSV files first of
all those aren't very convenient to
parse for web applications for example
so it's not the kind of thing that's
easy as easily consumed by a web page
and converted let's say to a
visualization or just written in a nicer
format to an HTML page CSV isn't really
good for that JSON is very good for that
and it's one of the reasons why it's a
dominant it's one of the reasons why it
has overtaken XML as a popular data
format on the web but to just understand
kind of the difference in scope there
CSV txt files tend to be historical
whereas our JSON files are going to be
whatever is current at the moment for
the update interval for that particular
data set so it'll become a little bit
more concrete as we look forward as we
move forward but hopefully this will
clarify for you a little bit of what
we're trying to accomplish with these
things now obviously JSON isn't only
good for her
my updated data that's the kind of data
sources and we tend to find in JSON but
we can also write JSON ourselves and
that's going to be the exercise this
week is that we're actually going to
each of you is going to create a
question json file that describes
something that is a you know that is
relevant to your life so in this case
I'm going to continue the example that I
began in class which was about books and
i'm going to show you an example of
writing a json file and your assignment
for this week is going to be to create
your own json file that describes
something in your life that you're
interested in or you care about so first
for starters here I've got my JSON page
in the background here for reference
which I find I find useful but the
question of course is what programming
am I going to use to write this now
technically I can do this in any text
editor but there are some helpful things
to think about when we're deciding where
to write a JSON file so JSON like any
data file we talked about propriety
proprietary formats and in text some of
the proprietary formats or kind of
formats that have extra information
associated with them are things like for
example Microsoft Word even an open
document format right which is an open
source version the open source software
that's kind of like Microsoft Word um we
want the absolute simplest thing that we
can get so I'm on a Macintosh computer
right now and so what I'm going to use
is a program called text edit some of
you may be familiar with it and i'm
going to use text at it in a very
particular way so when i open this up if
i were to say type a message here and go
to save this file what you'll see is
that the extension here is dot RTF ok
dot RTF stands for rich text format and
what that means is that there I can that
this will support some extra formatting
like folding italicize ation smart
quotes things like that and those are
really great when I'm writing uh you
know when I'm writing an article for
example right because those are things
that I might want to include in an
article when it comes
you data files we want it's the simpler
the better right so just as a CSV file
is simpler than an excel file we want
something that's even more basic than a
rich text file and so what I'm going to
do what I'm going to do is it the
default on text edit although is a very
basic text editor default on text edit
is that rich text format so I'm going to
use a command to actually change this to
what we call plain text plain text means
exactly that it will type the characters
it will you know it will show the
characters that I type I can't do any
formatting I can't fold I can't
italicize i will get smart quotes you
know all the things that sort of make
something nice to read on the page are
going to be missing from this but what
that's important for is it makes it
that's the kind of text that the
computer can easily read as data right
so if i'm on a mac i can do this with a
shortcut it's apple shift T and you can
see right away it's been reflected in
that file see I get this monospaced font
that looks kind of programming you know
it looks kind of like code how are you
seeing code so that's me converting it
to plain text which is an important
first step when dealing with with code
now as we get later in the semester will
introduce a program called aptana that i
mentioned earlier today that will use
for actually writing writing code but
for this exercise we're not going to
worry about getting set up in aptana at
this point it's just fine to use text
edit if you are looking at this on a pc
then the thing to use is notepad not
notepad plus plus just plain old notepad
it will it ought to default to a plain
TFC version and i can test and see if
I've done this correctly because if i go
to save this file it's now it's now got
on the bottom here plain text encoding
and it's as if no extension is provided
you txt so i'm going to say sample json
okay and again this works because Jason
is just text right so
doesn't matter that the extension is txt
the file extension I could change
manually to dot JSON file extensions in
general are actually just informative
for the computer all it does is tell the
computer basically this is the program
that you should use to open this right
attempt to open this with this kind of
program so I'm going to go ahead and get
started on my JSON file here and I've
decided that I am going to do my books
and the best that the type of books in
particular that I'm going to look at are
going to be illustrated books okay and
that I'm going to look at books that I'm
going to describe books particularly in
format of hard covers and so it looks
like I'm just kind of typing this out
but the reality is that I've been
thinking about this a little bit I've
actually sort of done some some
experimentation already and mainly the
thing that I want to point out here is
that when I have a list of things okay
so here i have an example of so menu ID
file blah blah blah right the point is
that when i have more than one item okay
i need to give it a name and I need to
use the square brackets indicate that
there's more than one thing coming so
everything that appears between matching
curly braces is what we call an object
right and as you can see that object can
have these key value pairs right which
is the thing on the left is the key the
thing on the right is the value we
always wrap them in quotation marks and
between them we see there's a colon and
if I have more than one key value pair
inside of an object then I need to
separate them with commas and if I have
multiple objects that are part of a
single larger object right in this case
menu item has three things inside of it
then I need to have a
square brackets that indicate that
there's a list so going back to my text
edit file here I've done my formatting a
little bit differently so i should i
might want to change that so instead of
putting this curly brace up here i'm
going to put down here I'm sorry instead
of down there I'm gonna put it up there
and in hardcover i'm going to say look
i'm going to pull out hard covers i'm
gonna say look this is going to be a
list right so right away one of the
things I like to do is I like to match
my my brackets and braces right from the
start and you'll see this is very common
in a lot of programs that are designed
for coding they're going to do that for
you right because then you don't kind of
have to figure out when to do that and
you'll notice that this is not
formatting nicely because of course I'm
not using a special program I'm just
using plain old text edit here to do
this so I'm going to say hardcovers and
then the question is what are my items
well I have the the the things that I'm
interested in recording about this I'm
talking about illustrated books so I
want to know what the title is and i'm
going to start out with left a Alice in
Wonderland and I have looked this up
before so I can also say that the author
is Lewis Carroll and I'm actually expand
this that I can see that was naturally
wrapping right so I haven't actually
added any carriage returns in here Lewis
Carroll and then need to look up the
illustrator but I'll leave a space for
that i'll leave that blank for now
that's fine and so now because i have
i've said look there's going to be more
than one item here i'm going to put a
comma because i'm going to put in my
next item so again i'm going to start by
opening and closing my braces and then
i'm going to fill in in between and so
i'm going to say title and let's see
what's another one here oh I'm going to
do the tails I'm quotation marks the
tale of peter
rabbit it's another nice one and the
author on that is Beatrix Potter so
classic you don't know it I'm big fan
and she is actually also the illustrator
on that so that simple ok and I'm going
to do another one in here and the title
is life doesn't doesn't frighten me and
the author on that is my Angelo and the
illustrator is gem show cat oops yeah
okay and so now I have a list of three
books although forgotten my this is John
to kneel ok and so now i have my now i
have my list and so again this is where
I just need to make sure that I've got
everything matching right so I know that
I have open and close all of these
balance doesn't look like i'm missing
any quotation marks and i've opened my
square brace and closed my square brace
so here I've got one curly brace that I
need to close I've got and I've got
another curly brace that I need to close
and I think I might be missing one I
think actually I probably need one here
and so that makes a third so the way
that I'm going to test this out is I'm
going to copy this and I'm going to take
it over to Jason lint which is actually
linked right here at the bottom of that
page and I can just paste it in here and
I'm going to check it out and it will
tell me whether or not this works now
for some reason my quotation marks seem
to have gotten all out of whack here and
I'm not really sure why um
so you can see that they you can tell
right there like a little bit angled as
I they're trying to be smart so I'm
going to try to figure out why that
happened but once I correct this what
you'll notice right away that it
actually did this nice formatting for me
right so that's a sign that things are
in pretty good shape I'm going to go
ahead and correct these and we'll see if
it works so I have gone through and
corrected all my quotes and I also
figured out what was going wrong with my
attempt to use a text edit so i'm going
to show you how to fix that in just a
second but the thing that i want to
point out here is that if you look back
a couple of seconds you know 30 seconds
or so what you'll notice is that as i
corrected those quotes city smart quotes
we started to see highlighting here
right so it started tinting the text a
different color and what that is is a
clue that things are going well right so
for all of you who are using text edit
for this here's what i recommend before
you start working on your file you need
to make a couple of adjustments one is
to go into the text edit menu and under
preferences you need to uncheck smart
quotes here that's going to come up for
you and then you also need to go under
edit the substitutions it's going to
have smart quotes selected you need to
unselect that right otherwise you're
going to end up with a problem that I
had which is smart quotes which is going
to give you trouble so I'll give you all
the specifics of the assignment what's
required in Piazza but if you have any
questions about how to do this please
feel free to post a question there or
reach out to me directly but yeah
hopefully this will be straightforward
and I look forward to seeing you all
next week
for your assignment we're sort of where
we ended up in class today which is
talking about JSON JSON again is
JavaScript object notation this is a
data format that is very common on the
web it's often used to distribute what
we would think of as feeds of data so
that's going to be data from web
applications things like social media
but also as we're going to see shortly
it's basically a place where a single
URL you're going to get data that
updates on a regular basis and that gets
overwritten in that same place right so
we're going to look for example at Citi
bike data and we'll see that at any
given time it's actually updated about
10 second intervals that at any given
time it's going to show us the current
state of the system but it's not showing
as historical data and obviously not
showing us future data and this is in
contrast what we usually see with CSV
files with txt files which tend to show
us things that have already happened
right so when we see CSV files first of
all those aren't very convenient to
parse for web applications for example
so it's not the kind of thing that's
easy as easily consumed by a web page
and converted let's say to a
visualization or just written in a nicer
format to an HTML page CSV isn't really
good for that JSON is very good for that
and it's one of the reasons why it's a
dominant it's one of the reasons why it
has overtaken XML as a popular data
format on the web but to just understand
kind of the difference in scope there
CSV txt files tend to be historical
whereas our JSON files are going to be
whatever is current at the moment for
the update interval for that particular
data set so it'll become a little bit
more concrete as we look forward as we
move forward but hopefully this will
clarify for you a little bit of what
we're trying to accomplish with these
things now obviously JSON isn't only
good for her
my updated data that's the kind of data
sources and we tend to find in JSON but
we can also write JSON ourselves and
that's going to be the exercise this
week is that we're actually going to
each of you is going to create a
question json file that describes
something that is a you know that is
relevant to your life so in this case
I'm going to continue the example that I
began in class which was about books and
i'm going to show you an example of
writing a json file and your assignment
for this week is going to be to create
your own json file that describes
something in your life that you're
interested in or you care about so first
for starters here I've got my JSON page
in the background here for reference
which I find I find useful but the
question of course is what programming
am I going to use to write this now
technically I can do this in any text
editor but there are some helpful things
to think about when we're deciding where
to write a JSON file so JSON like any
data file we talked about propriety
proprietary formats and in text some of
the proprietary formats or kind of
formats that have extra information
associated with them are things like for
example Microsoft Word even an open
document format right which is an open
source version the open source software
that's kind of like Microsoft Word um we
want the absolute simplest thing that we
can get so I'm on a Macintosh computer
right now and so what I'm going to use
is a program called text edit some of
you may be familiar with it and i'm
going to use text at it in a very
particular way so when i open this up if
i were to say type a message here and go
to save this file what you'll see is
that the extension here is dot RTF ok
dot RTF stands for rich text format and
what that means is that there I can that
this will support some extra formatting
like folding italicize ation smart
quotes things like that and those are
really great when I'm writing uh you
know when I'm writing an article for
example right because those are things
that I might want to include in an
article when it comes
you data files we want it's the simpler
the better right so just as a CSV file
is simpler than an excel file we want
something that's even more basic than a
rich text file and so what I'm going to
do what I'm going to do is it the
default on text edit although is a very
basic text editor default on text edit
is that rich text format so I'm going to
use a command to actually change this to
what we call plain text plain text means
exactly that it will type the characters
it will you know it will show the
characters that I type I can't do any
formatting I can't fold I can't
italicize i will get smart quotes you
know all the things that sort of make
something nice to read on the page are
going to be missing from this but what
that's important for is it makes it
that's the kind of text that the
computer can easily read as data right
so if i'm on a mac i can do this with a
shortcut it's apple shift T and you can
see right away it's been reflected in
that file see I get this monospaced font
that looks kind of programming you know
it looks kind of like code how are you
seeing code so that's me converting it
to plain text which is an important
first step when dealing with with code
now as we get later in the semester will
introduce a program called aptana that i
mentioned earlier today that will use
for actually writing writing code but
for this exercise we're not going to
worry about getting set up in aptana at
this point it's just fine to use text
edit if you are looking at this on a pc
then the thing to use is notepad not
notepad plus plus just plain old notepad
it will it ought to default to a plain
TFC version and i can test and see if
I've done this correctly because if i go
to save this file it's now it's now got
on the bottom here plain text encoding
and it's as if no extension is provided
you txt so i'm going to say sample json
okay and again this works because Jason
is just text right so
doesn't matter that the extension is txt
the file extension I could change
manually to dot JSON file extensions in
general are actually just informative
for the computer all it does is tell the
computer basically this is the program
that you should use to open this right
attempt to open this with this kind of
program so I'm going to go ahead and get
started on my JSON file here and I've
decided that I am going to do my books
and the best that the type of books in
particular that I'm going to look at are
going to be illustrated books okay and
that I'm going to look at books that I'm
going to describe books particularly in
format of hard covers and so it looks
like I'm just kind of typing this out
but the reality is that I've been
thinking about this a little bit I've
actually sort of done some some
experimentation already and mainly the
thing that I want to point out here is
that when I have a list of things okay
so here i have an example of so menu ID
file blah blah blah right the point is
that when i have more than one item okay
i need to give it a name and I need to
use the square brackets indicate that
there's more than one thing coming so
everything that appears between matching
curly braces is what we call an object
right and as you can see that object can
have these key value pairs right which
is the thing on the left is the key the
thing on the right is the value we
always wrap them in quotation marks and
between them we see there's a colon and
if I have more than one key value pair
inside of an object then I need to
separate them with commas and if I have
multiple objects that are part of a
single larger object right in this case
menu item has three things inside of it
then I need to have a
square brackets that indicate that
there's a list so going back to my text
edit file here I've done my formatting a
little bit differently so i should i
might want to change that so instead of
putting this curly brace up here i'm
going to put down here I'm sorry instead
of down there I'm gonna put it up there
and in hardcover i'm going to say look
i'm going to pull out hard covers i'm
gonna say look this is going to be a
list right so right away one of the
things I like to do is I like to match
my my brackets and braces right from the
start and you'll see this is very common
in a lot of programs that are designed
for coding they're going to do that for
you right because then you don't kind of
have to figure out when to do that and
you'll notice that this is not
formatting nicely because of course I'm
not using a special program I'm just
using plain old text edit here to do
this so I'm going to say hardcovers and
then the question is what are my items
well I have the the the things that I'm
interested in recording about this I'm
talking about illustrated books so I
want to know what the title is and i'm
going to start out with left a Alice in
Wonderland and I have looked this up
before so I can also say that the author
is Lewis Carroll and I'm actually expand
this that I can see that was naturally
wrapping right so I haven't actually
added any carriage returns in here Lewis
Carroll and then need to look up the
illustrator but I'll leave a space for
that i'll leave that blank for now
that's fine and so now because i have
i've said look there's going to be more
than one item here i'm going to put a
comma because i'm going to put in my
next item so again i'm going to start by
opening and closing my braces and then
i'm going to fill in in between and so
i'm going to say title and let's see
what's another one here oh I'm going to
do the tails I'm quotation marks the
tale of peter
rabbit it's another nice one and the
author on that is Beatrix Potter so
classic you don't know it I'm big fan
and she is actually also the illustrator
on that so that simple ok and I'm going
to do another one in here and the title
is life doesn't doesn't frighten me and
the author on that is my Angelo and the
illustrator is gem show cat oops yeah
okay and so now I have a list of three
books although forgotten my this is John
to kneel ok and so now i have my now i
have my list and so again this is where
I just need to make sure that I've got
everything matching right so I know that
I have open and close all of these
balance doesn't look like i'm missing
any quotation marks and i've opened my
square brace and closed my square brace
so here I've got one curly brace that I
need to close I've got and I've got
another curly brace that I need to close
and I think I might be missing one I
think actually I probably need one here
and so that makes a third so the way
that I'm going to test this out is I'm
going to copy this and I'm going to take
it over to Jason lint which is actually
linked right here at the bottom of that
page and I can just paste it in here and
I'm going to check it out and it will
tell me whether or not this works now
for some reason my quotation marks seem
to have gotten all out of whack here and
I'm not really sure why um
so you can see that they you can tell
right there like a little bit angled as
I they're trying to be smart so I'm
going to try to figure out why that
happened but once I correct this what
you'll notice right away that it
actually did this nice formatting for me
right so that's a sign that things are
in pretty good shape I'm going to go
ahead and correct these and we'll see if
it works so I have gone through and
corrected all my quotes and I also
figured out what was going wrong with my
attempt to use a text edit so i'm going
to show you how to fix that in just a
second but the thing that i want to
point out here is that if you look back
a couple of seconds you know 30 seconds
or so what you'll notice is that as i
corrected those quotes city smart quotes
we started to see highlighting here
right so it started tinting the text a
different color and what that is is a
clue that things are going well right so
for all of you who are using text edit
for this here's what i recommend before
you start working on your file you need
to make a couple of adjustments one is
to go into the text edit menu and under
preferences you need to uncheck smart
quotes here that's going to come up for
you and then you also need to go under
edit the substitutions it's going to
have smart quotes selected you need to
unselect that right otherwise you're
going to end up with a problem that I
had which is smart quotes which is going
to give you trouble so I'll give you all
the specifics of the assignment what's
required in Piazza but if you have any
questions about how to do this please
feel free to post a question there or
reach out to me directly but yeah
hopefully this will be straightforward
and I look forward to seeing you all
next week