Intro to JSON

Quick reference

• 00:04 So we've flown through our basic and even our intermediate JavaScript.
• 00:08 You've got the basic tools now and
• 00:10 you know the basics of the JavaScript programming language.
• 00:12 Now it's time to start learning how to use JavaScript for the web and in this video,
• 00:17 we're gonna look at JSON and that's JSON alright.
• 00:20 At this point, I just wanna give you a very quick introduction to JSON, and
• 00:24 we may discuss it in a little bit more detail later on.
• 00:26 So, JSON stands for JavaScript Object Notation, J-S-O-N.
• 00:32 And it's a way to pass data around the internet.
• 00:34 So, the syntax for JSON comes from JavaScript object notation.
• 00:39 And you can remember back a few videos we learned all about objects and
• 00:42 how they have name and value pairs.
• 00:44 Remember an object is sorta like an array but
• 00:46 it has a name valued pair instead of just an index number.
• 00:49 So basically JSON isn't really JavaScript per se.
• 00:53 But it's just, like I said, it's a way to transfer data around the Internet.
• 00:56 And since the Internet is all about moving data, JSON is particularly useful.
• 01:00 So you get a lot of API stuff that gets passed as JSON.
• 01:04 And maybe if you wanna get product information from Amazon,
• 01:08 you wanna show it on your website.
• 01:10 You can hit up the Amazon API and they will return JSON to you.
• 01:14 And then you could take that JSON and output it onto your screen.
• 01:17 It's really handy and just about everybody uses it for something.
• 01:21 So let's just go ahead and look at some and then we'll talk about it a little bit.
• 01:24 So come up here, this is basic JSON and it looks very familiar.
• 01:28 It looks just like an object.
• 01:31 Like we talked about earlier,
• 01:32 slightly different these quotation marks aren't here in a object.
• 01:36 For the most part this looks very, very familiar.
• 01:38 We've got the name and the value pairs.
• 01:41 So that's a very basic JSON, JSON can also use arrays.
• 01:46 So we have this, this is sort of a, pop this over here.
• 01:49 This is sort of a slightly more complicated.
• 01:52 But it's the same thing.
• 01:53 We've got a name and then a pair, a value pair.
• 01:57 But this value happens to be an array with three different values.
• 02:01 in it.
• 02:01 So this is JSON, JSONs gonna look like this,
• 02:04 it's got these curly braces and all these things.
• 02:06 So it may look a little bit confusing, but it's really very, very simple.
• 02:09 So customers, like I said,
• 02:11 is the name and its values are an array with three more objects in it.
• 02:15 So remember our customer object from a few videos ago?
• 02:18 Let me just copy and paste that so you can sort of remember.
• 02:22 We created a customer object, and it looks sort of like this.
• 02:26 Right, so we have this customer equals here's customer and
• 02:31 then, first name John name; value pair name value pair.
• 02:36 Slightly different, but basically the same thing, right?
• 02:38 So here's the thing, since JSON looks so much like
• 02:41 a JavaScript object it's easy for JavaScript to convert JSON into an object.
• 02:46 And then once the JSON data is in an object we can do all sorts of things to
• 02:50 it, run loops, run If statements, print it to the screen, add it together, anything
• 02:54 we would wanna do with a regular object we can undo with this JSON information.
• 02:58 So ,how do we convert JSON into a JavaScript object?
• 03:02 First of all, we need to shove the JSON into a variable.
• 03:06 So I just pasted it in here, I've created a var, myVariable.
• 03:09 And you notice I wrapped it in these single quotes.
• 03:12 That's because we need to do that in order to turn this into a string.
• 03:16 And, I've just, I put these plus signs so I can put it on different,
• 03:19 separate lines here and wrap them in individual, quotation marks.
• 03:23 We're using individual quotation marks 'cause we're using the double quotation
• 03:26 marks inside.
• 03:27 That's just sort of what we have to do.
• 03:29 So now we've crammed our JSON into this.
• 03:32 Now we need to convert this variable into an object, and so
• 03:36 I pasted this in here, and we do that just by declaring an object.
• 03:40 We'll call it myObject, and we use this JSON.parse, and
• 03:43 then just call the variable inside of it.
• 03:45 So that's all we gotta do there.
• 03:47 Now we're basically done.
• 03:48 We can do anything we want to this new object which contains this information.
• 03:53 So for instance I pasted this in.
• 03:55 We have document.write
• 03:56 Here I'm just gonna call my object and .customers because that's
• 04:00 .customers right there and we're going to call the first customer first name,
• 04:04 hopefully it's going to be John.
• 04:06 So if we save this, come back here and hit re-load, boom John.
• 04:09 We can change this to the third and that's Todd.
• 04:15 So this all may seem a little bit complicated,
• 04:16 I know we went over this very quickly.
• 04:18 But it's not really that bad I just wanted to give you a quick intro to JSON.
• 04:21 And I'll put all of this code in the resource file so
• 04:24 you can look through it at a little more slower pace if you want.
• 04:26 But very useful, in the next video we'll start to learn about playing with HTML and
• 04:30 CSS with JavaScript.

Lesson notes are only available for subscribers.