Hello, and welcome to another screen recording of Django for everybody. In this one, we're going to play with the JSON a little bit. So notice it says this text will be replaced in two seconds, too short. So let's take a look at how that happened. So the first thing is we've got a little JSON endpoint, so I'll pop that up. This JSON endpoint feeds us a little bit of JSON, and we can see the raw data. It looks like JSON, it's just a URL, it just says JSON. If I take a look at the headers, we see that as you would expect. The content type is application/json. So this is the URL. So let's take a look at what it takes to cause this JSON fun URL return some JSON, and we'll take a look first at our URLs.py and we're just going to map it into views. Now, this is a nonclass style view. So here is jsonfun. Now, one of the things that I do is time.sleep is not something you do in normal code. I just wanted it to take a little bit of time. But then what I do is I create a Python dictionary and using JSON response, which is like the next door neighbor to HTTP response, if this would be HTTP response, we'd be sending back a string. But, instead we're sending back a dictionary and so then it will serialize that into the right stuff. Now, it looks the same. The difference is in Python, it's a dictionary and in JavaScript it's an object and it came across as JSON. It's weird, just so happens they have the same syntax; JSON, JavaScript object, and Python dictionary. But there is conversion here and we could have much more complex stuff; nesting, etc, in here. So let's then do this again but now what we're going to do is look at the developer console and watch what really happens. So I will hit "Refresh" now so we can watch in the developer console what happens, two, three. So we saw this console.log. So let's take a look at the source code, but wait, what makes that happen? So here we are in the source code. First off, we've got this little paragraph and that's what comes from the server. Now remember, what comes from the server when you do a view source. I just do that so fast. When I do a view source, I'm actually seeing what came from the server. The other time you can get it, is if you go, I think right here and get the right request and look at the response. Let's look at role of response, response payload. In the network tab, this is showing you exactly what came from the server. I don't know why it's missing stuff. Maybe because I got the cursor over or something, I don't know. But view source is what came from the server and so we put this idea in here, but that's not what's there anymore. So now, I can see what's real, I can see the document object model and made a view the page source and then do Inspect and Inspect Element shows us what is the document object model because so you saw that the JavaScript actually changed the document object model. So let's go back to the view source so we can see how that's going to happen. So we've got our standard document ready function. These two lines at the beginning and end, just like whatever you put in here after it's loaded, as long as you have the jQuery library, away you go. So there's getJSON function within the dollar sign functioned $.getJSON has two parameters. The first parameter is a URL that hit /chat /JSONfun. It's hard coded here. You'll see in a second how that was generated. Then when you're all done, call these two lines of code and parse the return data. So it's going to go grab this and it's going to parse it and it's going to turn it into an object and then it's going to call our function and parse that object in there. The name data, I just made up. So what is going to do, is it's going to use jQuery to go grab the id tag back on line 52 here. Then it's going to say, let's take data.first. Now data is an object and.first is an attribute within that object and if we take a look, data.first is the string first thing. So that's how first thing ends up here. Then, the next thing it does is just console logs and that's just given me one more chance to talk about how awesome it is for you to console log things and you can explore these objects and take a look in those two attributes in this object that came back. So all the parsing is done and it's turned into a JavaScript object, and so it's really quite beautiful that here at line 61, you have a JavaScript object that represents exactly the same information as in a Python dictionary. It becomes Python dictionary. It's serialized, it's responded to, it's retrieved, it's de-serialized, and then you just have it working in a different programming language. Two programming languages, data structures and two programming languages going back and forth in a super beautiful, awesome way. So we'll come back and we'll talk about this chatting. I wanted to just show you how JSON works and then build up real simple application for that, that'll come up next. So hope this has been helpful. Cheers.
