Learn JSON with JavaScript Objects and APIs in 1 hour | Laurence Svekis | Skillshare

Learn JSON with JavaScript Objects and APIs in 1 hour

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 8m)
    • 1. JSON1hr

      1:49
    • 2. 1 JSON API introduction

      2:52
    • 3. 2 Resources for working with JSON

      4:13
    • 4. 3 Creating JSON Data

      5:30
    • 5. 4 Storing mulitple objects in array object

      3:13
    • 6. 5 Convert to String and Parse JSON

      4:07
    • 7. 6 Storing JSON as String to retrieve and parse when needed

      4:18
    • 8. 8 JavaScript Arrays and JSON

      8:07
    • 9. 9 JavaScript Loops Dynamic Object Names

      6:35
    • 10. 11 Use AJAX to get JSON data into JavaScript

      5:47
    • 11. 12 Loop each item in JSON

      5:14
    • 12. 14 Joke API retrieve JSON response

      5:49
    • 13. 16 Getting API data

      7:35
    • 14. 18 Create your own JSON connection to an API

      2:45

About This Class

Learn jQuery AJAX in 1 hour
Guide to getting started with AJAX use jQuery to make seamless connections to external data sources
and APIs
AJAX can load data from external files and into JavaScript seamlessly without page reloads. jQuery
makes working with AJAX easy, providing powerful methods for AJAX calls. AJAX is an essential skill
for modern web development.

AJAX (Asynchronous JavaScript and XML)

With AJAX, web applications can send data to and retrieve data from a server all in the background.
AJAX allows for web pages to change content dynamically.

Load content from external files, load JSON data and use the data within JavaScript.

JavaScript is used to bring these technologies together to create amazing user experiences, with JSON
data and the web elements. jQuery is ideal for making AJAX calls by simplifying the code and making
it easier create.

This course is designed to get you started quickly...

step by step training
source code included try it for yourself
resources and top links
everything you need to bring AJAX into your web applications
from an instructor with over 18 years of web development experience
explore JSON data within web APIs
AJAX is an essential skill to have, learning how to use AJAX will bring your web applications to the
next level.

I'm here to help you learn about AJAX and ready to answer any questions you may have.

Get started with AJAX now and see what you can do.

Transcripts

1. JSON1hr: Jason is the most popular format for data exchange between applications. If you are interested in connecting to a Web AP I chances are it's data format. Explore how Jason works and how to access data contained within a Jace on output. This course shows you how to work with Jason Formatted data. Put content looped through that content and get that Jason Data parse it and a whole lot more Jason, which is short for JavaScript Object notation is a syntax for data. Jason is easier than XML and also human readable. Most modern Web AP Eyes, output data and Jason formats. Within this course, you're gonna learn how in what Jason objects are and how you can create them. How JavaScript objects can use a raised toe. Hold multiple items how JavaScript arrays work and store data. See how data can be extracted out from Jason. Explored different methods of working with Jason Data String. If I parsing, store and retrieve Jason Data from storage, use Ajax to retrieve external Jason Data for use within JavaScript connected to various Web P eyes, and I would put the response data into your Web pages. This course includes everything you need to get started quickly source code and resources so you can jump right in and start creating your own Jason applications. It covers working with Java, Screwed to produce dynamic functionality. This is from an instructor with over 18 years of real world Web Felton experience. Learning how to work with Jason is a key skill within modern Web development. Jason and a PR's are everywhere. Once you start working with them, you will be amazed at what could be done with a few lines. Of course, I'm here to help you learn about Jason and ready to answer any questions you may have joined now and bring some Jason data into your Web applications today. 2. 1 JSON API introduction: welcome to our quick course on Jason and working with a P eyes. My name is Lawrence, that I'm gonna be your instructor for this course. And I'm so excited to have this opportunity to present these amazing topics to you today. I come to you with over 18 years of Web development experience, and I'm excited to have the opportunity to share my knowledge with you. So in this course, we're gonna she's showing you how you can work with Jason Data. So, Jason Data is quickly becoming the common standard that's used in everyday data transfer. And with Jason, you can do ah, whole lot. You can essentially exchange store data and transfer data between applications. So one of the things that we're gonna be looking at in the course is how we can create javascript objects and then how we can work with those objects. So those objects, typically they might contain several items within of information. So this is a Java script object array. So you notice that we've got an array with two items here, and we've got a whole bunch of information contained within this object and by utilizing accessing this object within a Jason format. It makes it really easy to work with now. One of the things that's great about Jason is it's human readable. So even if you're looking at a Jason file, it actually just makes sense. So even before we're bring in tar JavaScript, we can have some sense of understanding off what to expect from that data object. So I was showing you how to work with those data objects, how to parse through them and how to get all of those items that are available within the rate. We're also going to look at how we can pull in object information from an external file. So this is just a joke file where we can click and we can get a whole bunch of information from it. This is another one. So this is a jace on file that we've created. It's an online Jason file just like this one here, and we're able to pull back this information Vienna Ajax call and bring it into our Web page and doing all of this with Ajax. Jason is a great excellent combination together for a whole bunch of functionality. So I'm also going to show you how to connect to various AP eyes and how we can pull out that data, pull it back into our Web page and actually utilize it within our Web page. So all of this, and a whole lot more and again source code is included, and I do encourage you to try it out for yourself and check it out and see what you can make happen with Jason and Ajax working together. So when you're ready, let's begin writing and connecting to some AP eyes, pulling in that data into our Web applications and making some really cool, dynamic things happen within our Web pages. 3. 2 Resources for working with JSON: in this lesson. I want to give you a brief overview off the tools and resources having gonna be using and utilizing throughout this course. So first thing that we're gonna need is an editor. You can use any editor that you want. If you're looking to use the same editor that I'm using, I'm using brackets. So this is an adobe product. That's, ah free, open source editor that you can download So there's no cost to out and this is again. It's an adobe product. It's a pretty good editor. It's got a lot of great functionality, and I am going to be utilizing it within the course. Another resource that I'm using is I've got exam server running. So this is available at Apache friends dot org's. This is available in Windows Lin X and OS X. So I've got that running here in the background, and what this does is this gives me the ability to go to local host. So essentially I get on option within my computer to be able Teoh, open up Zampa and run the Samp control panel, which allows me to start an Apache server, and I can also do some configuration here is well, I can also run a sequel database eso if I needed these assets. If I need to have server running on my computer, Zampa is a really good option, and it's really quick to install. You just download it. You can just go through the defaults. So some of the other resources that I'm using the browser that and then abusing is chrome. And the reason I like using chrome is because it's got these Deb tools here. Eso deaf tools comes with every version of chrome and with deaf tools. You get some communication information here you can see elements the breakdown of dawn and dom information, CSS and a whole lot more says a lot of information contained within deaf tools. And essentially, it gives me a way to communicate between my application and my browser and see information visually. So some of the other resources that I'm gonna also be using is my Jason dot com. So this is a website that allows us to store Jason files online. So we created Jason file in here. Then we can we get a your URL, and we can see that and access it so get access to alive Jason File. There's also Jason Lint. So this also gives me the ability to lint and make sure that I've got valid Jason formatting, and it's going to come in useful as we progress through the lessons, lessons, and then over here, I've got a Jason generator. So if you're curious to what Jason looks like, this is a good example of Jason Data. And as you can see the data itself, the reason that we like using Jason is because it's actually human readable. So, as opposed Teoh a Note XML, which is the main alternative to Jason and storing and exchanging and transferring data. This is one of the main reasons why we use Jason. And as you can see here in this example, we can clearly see all of this Jason information. We can see the I D. We can see company email, phone address, and we can really easily pick out the values. And when we look at Jason, it's a combination of keys and values, so they're stored paired values, so every single value here has a key, so wait, identify it and then a value associated with it. So that's just over here on the right hand side, and it's all comma separated, and it can get grouped into larger pieces with the curly brackets. And we can have multiple Jason multiple objects within every single parent here. So you see here, we've got apparent here. We've got a container off the object comma separated. We've got another one here and another one and another one, and so on. So a lot of information is contained within here. And really neat thing about working with Jason is that we actually get access to all this data. We can pull it out into our HTML code, and it is really the optimal way for transferring data between applications. So the next lesson we're going to start creating some Jason files. 4. 3 Creating JSON Data: in this lesson. I want to introduce you to creating some Jason data. So first that we really want to look at is we want to look at how it releases to JavaScript because within this course, we're gonna be looking at Jason and its relationship to JavaScript, bring it in and JavaScript and working with Jason data within JavaScript. So Jason is short. So J s O N is short for JavaScript object notation. And the reason is that it actually it takes its properties. And it's essential structure from what we do with javascript objects. So we created a javascript object some guy create on quick javascript object. We see that we've got thes paired values. So if we have something like a first name and with within javascript, we actually have to have quotes around the key and then also the value. So we have a value for the first name. And so now the contents of my object are actually going to contain this information that's contained within here. So if I do a console log and this is how you can output javascript information into your console by doing a consul logs if I go to the Web page. Refresh it. I can see that within my console. I've got my object here, and I've got first name Florence. So I can also output that object information now within my console as well, or I cannot put it within my HTML. So I'm gonna just quickly set up a container here within HTML in orderto put some content into it, and we're gonna just documents And do you get element by i d in order to access this element from our HTML page and we just need to do it by i d So we identify it and we can do inner html. And now we're just gonna equal that Inter html Teoh, my object and first name. And this is all we have to do. Teoh retrieve back that information that's contained within that javascript object. So when I do refresh it, I see that I've got first name there, and that's cause I've got access to all of this object data. So and the really neat thing about Jason is typically, you wouldn't use it to just hold one piece of data. You could have multiple pieces of data and all you have to do is comma separated so we could have last name on swell and keeping that same format so we can do a last name. And we can also do age if we wanted to so we could do a number. There's a lot of options here on how to contain information within the Jason format so we can have strings. We can have numbers we can even out objects, arrays, and we can have literal, such as true or false Boolean values. No, and so on says a lot of options of the different data types that we can hold in our JavaScript object. And when I refresh it, we see that we've got a nice object. All of the contents are here, and I can access any one of those any one of those objects here that are contained within this JavaScript object just by referencing the key so following instead of First team, I want to do last name or let's say I want to do first and last name so that I could just concoct Nate it together. And I can just call over to the particular the particular object that I'm looking to reference and pull back out. So now when I refresh it, we see that we're accessing that object information were able to interact with that and output it within our Web page. When when we look at our data, it just makes sense. It's in a readable fashion. So what we're going to do in the next lesson is we're gonna actually convert it into a Jace on file. So what we have here in front of us if I was to copy and paste this into our validator just going to show you what happens and then in the next lesson, we're gonna take this one step further and we're going to make sure that we've got some valid Jason. So when we see whenever we're setting this up within this type of format, and I believe I forgot that quotes around there, so that's probably wait that failed there. So within the javascript object, it actually can work with either were with the quotes or without the quotes. So I'm going to just copy that in do a valid and we see that our content is actually, in fact valid Jason formatted data. So you're probably looking at this and saying. Okay, well, how do we reference this? Because typically with Jason, you see that you've got does just different referencing keys and then Jason inside of Jason and data inside a data. So the next lesson we're gonna look at how we can, how we can develop this further and have multiple values stored within our Jason and how we can also identify those values. So just like what we do when we look at that Jason generator over here that we've got certain data here. And then we've got data within data. We're going to do something similar in the upcoming lesson. 5. 4 Storing mulitple objects in array object: in this lesson. I want to show you how we can hold even mawr data within RJ Sohn format. So earlier we had looked at our Jason object and we know that whenever we've got these curly brackets that information contained within here is how we access and how we set up our Jason data. So we can also take this one step further. So typically, you might not just have one person. You might have a whole array of information that you want to store within a Jason object. So you might have several different groupings of off first names, last names and ages, so you might have something that we could maybe refer to as people. And what I'm doing now is I'm actually creating a key that's gonna sit outside of the rest of the Jason. So we need to also always wrap it in the curly brackets. So I'm just wrapping this one now in the curly brackets and I'm gonna show you how we can create essentially an array of objects. Now, this is gonna work in the same way that a typical array would work where now we've got our array brackets and we've got items in there, Ray, we've got the first item, the second item. So even though these are objects here that we were looking at earlier there actually array item, so is in a ray object. And now, whenever I console log out my object just going to show you what happens when I refresh it . I've got an array called so I can identify as people and I've got two items within the array. I've got two objects and then all of that object information is still there, and it's easily accessible within our JavaScript. So now if we want to actually access the first name, we could do something where we need to refer to the parent key here. So that's people. So we're referring to people. And if you want to access the 1st 1 we could do it within this type of format, and we just need to specify now which person we actually want it have access to and pull out that data. And I'm just gonna update the names here so that they are gonna be different. So I'm gonna save that one here and now we're going to refresh it and we see that we've got Smith, John were able to have access to all of this information contained within this Jason formatted object where we've gotten a re with two different objects. And then we have access to all of that object information. And this just basically means that it's a really well structured way to hold multiple items within an object and really get access to all that information. So in the next lesson, we're gonna look at how we can loop through this object information, I will put it within our JavaScript. And then we're gonna look at how we can take this out of our JavaScript and use it actually as a jace on file and pull that information in and utilize it within our application. So all of this is coming up in the next set of lessons. 6. 5 Convert to String and Parse JSON: The really nice thing about working with JAVASCRIPT objects is that we have the ability to really easily update data that's contained within their So, for instance, if we wanted to add something new, a new object under people and I'm gonna select under the 1st 1 here and I wanted Teoh say something like months known. So for instance, maybe this is a list of how long we've actually known people and within our object. And we didn't originally included within our Jason data, and now we want to add that in. So now I can really easily do something like this. So this could potentially be a number as well. And now when I go back out to my JavaScript and I list this out, we see that that first object and there's the second object and that second object now has the months known within its key values there. And this is really key to understanding that we do have the ability to really be flexible with content once we create that object, we have a lot of flexibility Now, with interacting with that object is quite a lot that we can do with those and also JavaScript provides a lot of really built, baked in functionality that you can utilize in order to access your JavaScript. So, for instance, if we wanted to work with a string so that let's just do a string version of it So string and people, I can really easily do a conversion from Jason Teoh String String if I that's the function . Essentially, this converts Aggies on value into a string value. So let's take a look at what this output is gonna look like. And there is a reason for doing this. The reason you would do this is that maybe if you want to store it, if you want to store it locally in your storage on and you didn't want to have a whole bunch of these objects information you can string if I it as a string and I didn't spell string if I right there so I do think Tito make sure that I spelt string if I right there, but we can string if I it and see how it's gonna look within the console. So when we string, if I out that information, we get a string value of all this Jesus on information and now we can pass this as one string value. So this that means basically that this is just one string on its equipment towards one piece of information. And now, if we want to pass it or store it, this is the best way to store this type of information by string, defying it and then we have access to it. And the opposite site is if we actually want to put it and convert it back into Jason. So just show you how to do that as well. So let's do another variable here and we're gonna call it my friends. And this time we're going to do the opposite of string. If I so we've got a string value that's formatted as Jason and we want to put it back to the object. So we have to do is place that within here within this parse. And now whenever we do that, my friends, you're going to see that the output is back to an object format and we can get once again interact with it as we originally did when it was a JavaScript object. So you see how much flexibility that really is to all of this and we can bring in a string value and convert it back into an object. In the next lesson, we'll take a look at more of, ah use for actually converting into a string. And I'm gonna show you how to store it within the local storage and then again access it and pick that information up because there is definitely a benefit to being able to store it as a string. And I'm gonna show you that in the coming lesson. 7. 6 Storing JSON as String to retrieve and parse when needed: So the previous lesson we looked at, how we can string if I and how we can parse. So this lesson I want to show you how we can use string if I and parse when we store values . So ideally, whenever we're using our sessions storage. So in order to set that up session storage and we set an item so seven item within the session session storage and we're just gonna call it friend. And if we want to set and store that entire might object, I'm gonna just show you what happens. And then if we try to retrieve that information So we were storing it here and then over here, we're going to simply try to retrieve it. So we're going to give it a variable and call it my list. So this will ideally be the list of friends that we want to see. So session storage again. And this time we're gonna use get item story and retrieve that item that's contained within friend. And so we're gonna out put that into the console and we're gonna list of the my list, and I'm gonna get rid of all these other consul messages here so that to avoid confusion. So basically what we're doing now is we're taking this my object, which is a Jason formatted object. We're adding updating so we can leave that in. And then what we're doing is doing a session storage. So let's storing it within the browser. Eso that object information under an item named Friend and then we're using session, get we're picking up the item, get replacing in the variable my list and we're out putting my list. So let's take a look and see what happens. So we see we've got this object object and we actually can't work with us because we don't have any of the contents of the objects. All it says is object. Object. So this is one of the problems. Whenever we're storing on object as an actual item here, we can only store that one string value. And this is where string if I comes in. And if we were to actually string if I this object so this would actually make more sense. So let's refresh it again. And so now we're treating back what looks familiar to us from before is this this string of values and now, even if I was to remove this, if my comment this out, we see that we still got that value stored in there. And now we can actually use the opposite, which is Jason Parse. And we can parse it. That information that we're picking up within that list and we can actually parse that and utilize it. So all we need to do is Jason Parse, and we're just gonna wrap it around the my list here and go back out here and refresh it. And again, we do have access to people and we can make updates to it once again. And this is often utilised whenever we're storing information. So we're storing within a shopping cart. If we've got a number items here that we're we've got a growing shopping cart, then this is a great way to store information and stored into the session storage without having to set a bunch of items to pick up all this information. Because can you imagine we could potentially do this, but it would take quite a lot of set items and so on. Whereas now if we string if I it, we turn it into a string value. We only have to set that one value that coincides with the key of friend and then we pick up friend than we can parse it it and then we have access to it once again. And this is how you could use string if I and parse Jason parse in orderto work with a whole bunch of data when you only got one one key in order to stored it. And this will work as well within databases and so on. So if you've got some Jason data or if you've got a lot of data that you want to store, you can convert it into one string value and then parse it out afterwards. 8. 8 JavaScript Arrays and JSON: in this lesson. I want to look at JavaScript, a raise and how they relate Teoh Javascript objects and also how we can relate them all together with Jason. So let's create an array. I'm going to just call it friends. So this is just gonna be a blank ary within javascript it. Understanding a raise is also important to understanding how job JavaScript objects work and ultimately, Jason, because having a good, solid foundation and working with JavaScript objects will really give you a lot of benefits . When you try to endure, start working more with Jason. So first of all, with javascript, we know that we can set with the Rays. We can set multiple array items so we can start out with zero and we can do something like set a value of one. And then we've got friends. So we've got a rave value and this one is equal to two and so on. Eso also, when we're setting up our raise, we know that we had actually skipped values and we can also use names instead of just the numeric keys. So let's ah, let's console Log this out. At the moment on, we see that we're consul logging about that Friends go into the browser and we see that we've got a different format than what we do See with the objects where we've got an array to we see we've got one too. So we've got a division here with the Rays and we could potentially add in an object in each one of these as well are formatted as an object and so on. So I also want to look at how we can use Jason to string if I this So what? What happens when we string If I this particular value of friends So if we string if I an array first of all, are we able to string? If I n ary and if so, then what it's gonna look like when we actually put it within the console and can we actually use it as an object? So Jay saw string If I So we're using the string of fi built in function and we're gonna string if I the friends array and so also so we're gonna consul, log out friends first and then we'll law goat. Uh, it's not actually going to be j son, but We're just calling it my Jason for now. So we see that we get this string ified version of their rate. We've got the one and the two and so on. So we saw also that if something looks like on actual Jason object, we can parse it. So what would happen if we do a Jason parse on this hot new brand new string of fight ary? So let's let's see what happens. And I think I need another bracket there. So let's let's go back out and see what happens. So when we string, if I it were actually turning it back into our array. And this is the interesting part about Jason and its relationship to JavaScript, objects and the rays and all of that, because we do have the ability to turn it into and Ray. But now we have ability to turn it back into what originally waas. So what happens if so, what happens if we try to add to this object? So do we treat it as an object? And we saw earlier that we can have some content to it to objects. So do you think that this will work, that we're able to add in a brand new object into their Or do you think it's treating it like an object? And we see the interesting thing here is that it kind of treats. It's similar to an object where we've gotten a raid with two items here that we're gonna re with two. But when we added first, we actually got a retrieved value of first. And we know that whenever we're creating a raise in JavaScript, we don't need to do them sequentially. So I could do something like this and have three items in the array. And now this is going to get interesting because we've got some reserved spots. So when we bring it back out of the string ified version, so we string if I it initially we keep all of these Knowles and we keep all of the positioning. So now we've gotten a rate with six items, but we actually have seven in there because we have one named item, so we don't have one in America one, and this is something that we actually wouldn't be able toe loop through, either. So now let's take a look at this even further because we know that with JavaScript a raise , we can also set the index value. So if I wanted to have something like this and I equal it too, test name, we get that and what happens here if I do first and I do test name. So let's check this out now. And now we see that we're throwing an air there. That's because we forgot something after the five. There's I forgot the courts there. So let's go back it and try this again. So now whenever we go into the console, we see that we're actually able to update it. So we've got the first we've got the second. But when we go back over here, we're actually dropping the first and seconds. It's not taking those values. It's actually dropping those named values. So until we actually try to add one back and we don't see it whenever we string, if I it and these are important things to remember that this is the way that it's going to behave. So even though our initial array does have a first have a second whenever we transform it and we string, if I and we bring it back, we lose these names values. So that's just some information about javascript arrays. And when you try to parse it as Jason and string, if I it it doesn't exactly work, Aziz, you'd want it to s o. This is just something that keep in mind that when you do do some updates within these arrays and so on, that you want to make sure that you are formatting things properly. So another question you might have is that what happens if you remove out These are raised and only of these named values in the hurry. So do you think is gonna happen? Here s so we've got a first. We've got a second, we've got a length but we've got no items and that once we string ified and that's because it's looking for the That numeric sequence of values of this key actually has to be in America value in order for it to propagate and stay within once we string of fine. Once we parse it, it s so we can take a closer look at what happens with them string if I as well, where when we string, if I that array, we see that we still have. That s oh, we've got when we string, if I it over here, we actually don't see anything there. So that's completely blank. And that's why we're not able to pass over anything but that array value is still containing that first and second key values. But then when we convert it back, we end up with the same thing as the string. So essentially, the break here is happening within the string. If I that we're not able to string if I an array with named values within those those keys . So in the next lesson, I'm gonna show you a little bit more with JavaScript and how we can loop through using JavaScript, loop through a number of items or number of objects that we've got. So we create an object array in the next lesson will show you how we can loop through those values that's coming up 9. 9 JavaScript Loops Dynamic Object Names: So this lesson. Let's go ahead and create an object. So my object and will give it some values here. So this object essentially is gonna be friends. We're gonna have a listing of friends and did a coal in there, and that's gonna be an array of objects. So we're gonna have multiple values that are contained within here. And then when you see the curly brackets and let's indicate so this is gonna be the 1st 1 is gonna be for first name, and I forgot one of those quotes there. So we just need one quote there and separated by the colon. And let's give this person a first name of Mike. And also, let's give them some additional information here within this object. So do last name off Jones, and we'll separate down it. And now we can add in additional ones as well. So if we I'm just gonna copy this format, eso we convince copy separate it, and I'll just update the names. So maybe change this one to John Smith now, save that could beautify it. So it's a little bit more readable as well. So here we have our Jason or JavaScript object, and it's ready to go to get formatted. So now if we console log out and I'm gonna show you how we can loop through it within JavaScript so we don't need any g quit toe loop through. It s so this is our object. So God, Ari, the two items here within our object. Torri So now we're ready to loop through it. So with, uh, with JavaScript so we don't need to bring in the J Query Library so we can do something like this where we need to specify so we can do my object So x in my object friends. And then here is where we're actually gonna loop through every one of those items there so we can console log, and we can log about the value of X, and we can equal it to and then add in something out else here as well. So we can simplify this Probably a better way instead of continually listing out that my object friends. So it sometimes is a good idea to simplify so we can create a container for that so variable that will hold the user information. And I forgot that in so in users. And here we're going to specify. First of all, maybe, let's just specify so console log users. And so what do you think is going to get logged out here when we console log users? Because notice that we've got the my object. We've got to users here, and I'm going to just lower case this cause that's probably better format. There s Oh, we've got two items here within that object. Torri, we're looking at the root of it as friends. So my object friend is going to bring us to this route, and we've got two items there. So for users, what do you think is going to be contained when we Consul log users? And then also as we looked through the users Can we do something like this? So X and we can specify the first name to get the users first. Name s O. Do you think that this will work, or do you think we need to update some of the formatting s O? What do you think is gonna happen here? We're gonna throw some errors or everything is gonna output properly. Eso we see that we get that original friends array. But once we look at eso, we look at the root here. We've got the friends. So you got the two objects are essentially moving our needle over to the root of the rate where we've got the two objects here. So object one object to We've got a length of the number of objects or the number of items within this array. And each array is item is an object in itself, and then we just need to call over to those. And then, as we looped through within that four Lupin JavaScript, we're listing out the first name of each one of them, and we could just as easily list of the last name as well. So just to add that in and just to make things different, so with our objects here we have a few options as well. So when we do something dynamically, we can also update them within this type of format. So if we had last and we want to have a dynamic value here updating, we could do that as well. So I could do something like variable. Why equals one, or maybe just to cheat a little bit? Variable. I equals S t. So instead of last, I could do this, plus why? And I could have something dynamic happening here. So what do you think is gonna happen now? So now I've confused it a little bit here. I've created a different way to pull in that object information. And do you think this is still gonna work? Because looking at the source code, you can see that. Why is equal toe S t. And if we do l A plus Esti, we're going to get last. And this being contained within these square brackets should read out toe last and should relate back to the friends last name. So let's see if this works. So do you think this is gonna work? And if you said correct, it is gonna work your rate. We do have the ability to bring in content dynamically into our object names. And this is a really big step forward because this gives us the ability. If we had a bunch of different names here, we could loop through them where we could really make this dynamic. Eso There's a lot of options here as we work through the different variations of how we can pull out this object information and then the same thing as if we're working with the Jason file. We can pull out that information within these types of formats. 10. 11 Use AJAX to get JSON data into JavaScript: in this lesson. I want to bring in Jake Worry and G Creek. It will give us the ability to actually pick up and do Ajax calls. And it's really easy actually to do Ajax calls with a query. So first of all, let's open up our browser, go to the hosted libraries. Eso developer to start google dot com has some seedy ends and I'm gonna bring geek worry into our project. So simply copy paste the G Corey library. Make sure you've got it above your script tag. And now you're ready to do some Ajax calls. And also, I'm gonna add in another div here, given my d of button so that we actually have a button that can trigger something toe happen within our web page. And I probably should style this button as well. So I'm gonna add in some quick styling here on do border black border and button for maybe some potting around. It s oh, now it will stand out a little bit more and I'm gonna call it Click me so that always works to get people to come and click your buttons. Right s. So now when I refresh it So I've got my click me button and I'm all ready to go to get it to initialize and actually do something with my code. So now that I've brought Jake worry in with Jake worry, we usually like to keep the wrapped around it, so make sure that the document object has loaded, That's why. Do document Ready? That should be ready. So document ready. And then we run the functionality whenever the document is up and running. And then this is where we got our contents of RJ query so I can almost remove this My object here s oh, I wanted to hook up an event listener to the button. So btm And now whenever we click on b t n we're gonna run a function. So, whatever, whenever we click the button, we're gonna run a function and I'm just gonna console log out a message that says clicked just to show you that everything's up and running and we're ready to go to move on to do our Ajax call and retrieve some Jason Data. So now whenever I go over here and I press clicked me, we see that we've got this Click me firing off. Everything looks break. It's up and running. So let's coffee over our data and copy it over into adjacent file. So just copy this whole thing over here, and I'm gonna create an online Jason file. So saving that And now we've got our online Jason file. We're ready to go with that. So now I can try to access it via get request. So this is the girl that I'm trying to access. So I'm just gonna notice comment that over here and let's build out the rest of our Ajax call. And with G curry, we actually have the ability to do a call to just to get Jason Dina. So if you have an A p i and online a p I that you want to access, you have It's an open E p I. Then you can access it in this type of format so you can just do get Jason and first need to specify the URL, and then we run our function and we can call something like data. And so what's going to result here is that we're actually going to get that data information back instead of clicked. It's gonna say data. I can remove all of this information now and now. Let's try the suit and see what happens whenever we click our button. So now I refresh it. I click it and were retrieving back that information from our online file. So whatever information we've got contained and here were retrieving back via the Jason Call. And that's how we can do any Jack's call. Essentially, Jason Data is ideal for transferring data within this type of format because of the fact that it's really easy to parse that back it and make it usable again. Eso This was another example of using Jason via J Query and when we can pull in those online online endpoints and pick up some data and then we could utilize that data and information within our JavaScript applications so we could just as easily just as before we could do. We could do people. We could do zero and get the first names. I just show you that really quickly. So we've got data and within the data. So we're looking at people, and so we want to get the 1st 1 and first name, so that's gonna be people zero and first name. So now we're retrieving back that from that online file where you've got it as an object called data. So when it was, we were received the response back from this URL we get it within a data container, and this is actually going to be an object array so we can loop through it. We've got people, we've got the first item, and then we're gonna pick up the first name. So now, whenever we click the button, we get that first name there. So that's coming from over here. The next lesson, I'm gonna show you how we can actually loop through the retrieved information and we can loop and weaken output. All of this information from a J saw on file. So that's coming up in the next lesson. 11. 12 Loop each item in JSON: the last lesson we saw how he can retrieve some information back from a Jason file that's online. And now we're gonna utilize it within our JavaScript. So what we want to do is we want to actually loop through this data object and pull out all of the results. We're gonna make some use of this data and in order to do that. So I've already hooked up a G query library, And J coury comes with a function called each, which allows us to actually loop through every item here that's available within this returned object, and then we can make use of it within our coat. So we need to also specify that the object that we want a loop through So this is gonna be data, and actually we're gonna loop through data and we have a container for that. So data people is what we want up toe loop through, and we're gonna build it a function here. So the function, essentially, we can pull back that index value and we can pull back the key value as well as we look through here. So let me show you now what's actually going to be happening through as we're looping through, pick up and looked through that key value there. What we're doing here just to clarify this, that where we're sending over Ajax request was an asynchronous request that goes, is done the edgy query. So it just sends over a request to this girl, and it picks up the response information on that you, Earl, and it retrieves it back, as in the container data. So this is just a regular function with an argument. That argument is data, and that's where we get this data. But we want to actually loop through all the people so we don't want to pull back just data because we've only got one initial value within data, so that would just be people eso We want to go deeper than that and we want to pull back all the people. That's why it's data people. And then over here, we've got some parameters here that are being sent back within this loop and we see we've got an index and we've got a key. Sochi essentially is the contents of each object. So essentially, what we're going to get back within the console is gonna be two objects and both of these objects are going to contain all of that information from each person. So we're gonna get to objects back and contents of each person. So let's check the suit, refresh it, give it a click here and there. We've got the first person as an object and the second person as an object. So basically, what this means is that if I actually want to see key first name and go back and refresh it so what do you think is or what it. So now what's showing up here is actually going to ask what you think is going to show up. But I already clicked it. So we're listing out the first name and the last name, and this is again all coming from the a p i my Jason dot com. So we've got the first name and I could just as easily add in that last name into the consul output there so I could do something like he last name because now he has all of that object information that we want to pick up and use. So I could also do a key. And I believe the last one was age. So let's let's try this out and see what this looks like within the console. So refreshing this and going back over clicking the button and we get all of the information and we could actually format it. However we want, we can even output it within our output here So we could do something like dollar sign and pick up that objects so output or that I i d output and we can upend. And as we looked through it, we can upend within all of those values there on then Every time we click it, we're going to continue to upend. And I should actually and include a line break there so that we can differentiate between every time we're making the request. Let's try that again. So now when we click me, we're picking up all that information and this is the same thing, even if we had ah bunch of people here. So if we if we went back and we did a whole bunch more people, so I'm gonna just I'm gonna just copy and paste. I know they're all gonna be the scene here, but this is just give us a whole looping of a bunch of people here. So now if I pick this file up and instead of that one, I replace it with this one and go back and refresh it and do the click me. So now we get all of those users that air there. So I know that they're all the same. But they could just very well be different. And we can pick up all that information that's contained within that girl. And now we can work with it and utilize it within our JavaScript code. 12. 14 Joke API retrieve JSON response: the previous lesson. We showed you how you can retrieve some data from a Web. AP I. Now there's a lot of Web BP eyes out there, and there's a really good list of Get hub dot com Todd Moto Public AP eyes. So they have a whole listing of a bunch of AP eyes. Some of them you need to sign up for some of the meat it aloft and so on. Some of you don't need an O off. So I'm just gonna pick some of them here and take a look at one, and I'm gonna show you how to set that up. So let's say, for instance, we want to do Chuck Norris database jokes. So this one sounds interesting. So let's go over to that a p I And here we've got some information. So the jokes are available over here so we can see that whenever we go to the website, So there's nothing there, so there's no end point. There s So we do need to specify something within the call back. So we've got something here called jokes random, and we've got some parameters here. So changing the name of the main character we can update. So let's just take this one over here and let's create a joke out of it. Or access that and see, actually, what data were pulling back? So we've got our first name, John. Last name does. We're actually sending some parameters over on. We're going to retrieve back some information, and you can take a look at any one of these AP eyes within the U. R L. And we can see here that as we load it, this is Jason formatted data. And that means that we can make use of it within our JavaScript really easily. So every time I refresh and it looks like there's a new joke that's coming through, not shirts even utilizing these values, maybe it Maybe it iss eso just keep those in there and let's link to that entirely. So just save that over there. And now, whenever we go to our local host, we see that were able to retrieve back that a p I information. So I've got a value of object. I've got categories. I've got an I D, and I've got my job contained within their So let's let's pick up the value of the joke and maybe output it within our page every time the user clicks the button. So take a look at the way that's object is structured. We see that we've got the object. Eso that's the route. We've got a value here and then within the value there's joke. So how do you think that we can pull that out into our JavaScript? So do you think it's value joke data value joke? Do you think this will work? Let's get go outside and try that it. And now we see that we're able to pull back that joke every time we click me so perfect. And now all we need to do is put it into our output area. And Jake Worry just makes this super easy. So output and let's do it where we could upend it as well. That's what we're doing. Before we were pending that joke information. So now every time we click the button, we get a brand new joke, and actually we should add in a line break or maybe Adamson. So just give it a class and give it a class of joke. Close that off Can Captain eight. That together so that we get our joke output there. We also have toe get that quote there. So def close that one off. And now let's have some styling quickly for the joke. So what do we want to do with jokes? We want to display Block and let's give it some parting and give it a margin and give it a margin on top. So maybe just something simple like that. So now when we refresh it and we click, we get our jokes, we see that we've got a whole output of jokes. Many times we're clicking at every time we're doing a full trip to the A P I picking up the content that's available in the A p I. And we're simply parsing through that and not parsing through it but just going through it and picking up that object information. And now we've got the whole listing of jokes via on a P I hear that's available from a p i dot I see and db dot com, and we can completely utilize this. We've also got ability, just do random jokes. So here it's got some different parameters that we can pass. There's a whole bunch of really cool stuff here that you can do. And really, we can also fetch a number of jokes. Apparently. Eso Let's we could try that out as well, where we could list the joke categories. Eso Let's try out and see what the number of jokes here. So this is just telling us how many jokes are available. So that's that's how many jokes are available in the a p I s o. It actually wasn't giving us more than one joke. Eso. Sometimes you have to play around with it and see what's being responded back here and see if we're actually getting any change in that a p I. But this one worked really well and there was a full list of all these different AP eyes and all these different things that you can automatically pull into your website really easily on just by using some simple Jason and JavaScript 13. 16 Getting API data: So in this lesson, I want to show you how we can access another ap I So I found another one here that also retreats back Jason formatted data and we can see a whole bunch of information here. So if you want to search, show, weaken, search user tags So there's a lot of different options here what we can search by. So if we were to click specifically a show here, so we get all of this information coming back, and now we can utilize it simply by connecting it via our Jason file. So let's update this again. Usually, I do like to start by doing a consul log of the data just to see what we're pulling in and what we have access to and just to make sure that everything is working. And then once I get that console log of that data, whenever I click me. So now we've got all of this information and again, this is the route object. So if I wanted to pick up that description, I can pick up the description here. So now I know that I've got a description here rate on the route, and I'm gonna keep it as jokes and no need to update that. So now when I refresh it, we see that I can pick up all those descriptions there. I've got my favorite count created at a time and a whole bunch here. So I've got my u. R L tags and so on. So we can also be more specific here with the different AP eyes. So maybe, um not sure s we've got the party time there. So got some other options as well that we can pick up. We can, uh, what's popular as well and this one in particular. So we've got a bunch of objects here within their So maybe this one is a little bit more interesting where we've got our data and we can look through the data. So let's let's do this one instead. So we saw how we can put that one really easy and straightforward there. So again, starting out by pulling out that data and utilizing it in the a p I. So now when I click it, I see I've got this object, but I've got a data array of 20. So this this is what we looked at before because we have the ability actually toe loop through and get each value. So this is what we had done earlier in the earlier lessons. Let's try that out and we'll add R. J Coury again. So this is for each and were searching for the results of data. And we've got our function here so we can do our index value. We can do our key value as well. And then now we just need to specify what we're gonna do within that function. Eso Let's first just try to console, log it that information. So as we loop through all the values here, just gonna list it, the keys, go back yard here and refresh it. And now we see we've got all of these objects here. So we've got essentially way. Actually, we need to go through the data so that I believe it was data. It was called data as Wells, we've got ours called data data data and now we see that we've got all of those objects there. So ray numbers and so on. And now we can actually pull out, uh, whatever information we want. So we've got a slug and maybe we want to do the name or we've even got pictures here. So pictures is an interesting one. Eso Let's Ah, Libya. Let's put some pictures here as well and within our output feed. So do some pictures and we'll do some information and so on. So let's go back into here. And this is why I do like to use the console because this gives me some pretty good information here that I can get the name here. So that makes a lot easier to kind of loop through this, uh, this information. So instead of data, Nowitzki, because again we're looping through. We're getting all those key values, so we're going to keep it at joke. So now let's refresh it s we get all of those and let's pick up and put picture in there eso under pictures we've got. Maybe we'll just take this one here. So pictures, so under key name here or to an image source and equal that source, and I gotta fix that in a second. So we do have quite a few quotes going on here, so I've got the single one to break out of my string and the double one that I'm wrapping my image source with and I believe I believe this was the source. I believe it was pictures, but I might want to double check that. And I do need to close off my images. There s let's, uh yeah, it was pictures. So let's hope we got an invalid token there. So there was something that's gone wrong there. I added in the decimal place instead of eso. So this one, we do have a problem here because we're trying to pick it up as value here, but it's starting with a numeric value and the object Data's So it's actually a good thing that we looked at this because this is a no no, we can't start it out with a numeric value. And this is why JAVASCRIPT is really flexible because it also gives us the ability Teoh pick up this object key here within the square brackets and the quotes. So this is a good use case, and typically this is gonna be the same thing. We could even do it for these ones as well if we wanted to. We could do that square brackets and do name, and we'll pick that up within that same format as well. So those are interchangeable within JavaScript. So now let's just show you how that works. So when I refresh it so now we get all of that name information out, we get all of those pictures and everything popping up and showing up as we expected it to . So I'm actually going to make the images smaller here because they look like they're Farley fairly large, some ox with and the enemy comeback swift of 100 pics just so that it looks a little bit better when I pull those out So we can still see that information we see. We've got all the images and essentially you can pull through a p I information. And when you do run into scenarios like that, or if you've got dynamic values that are changing, you can always do the square brackets around them, and you could utilize those objects within that same way. So just start to note here, this is the same thing as he. So it zig quibbling within that JavaScript object. This is just another way to write it, and when we do run into these scenarios, when we start off with a number here, then weaken format it within this type of format, 14. 18 Create your own JSON connection to an API: In the previous lesson, we saw how we can use Jason and Ajax and G Query to access some a p I some Web AP ice. So, in this lesson, I want to show you how you too, can practice and work with the various AP eyes, so you can either pull them in on your local machine, copy and paste the source code tryto for yourself, check out some different AP eyes and also work with the ones that we've looked at within this course, and see what information you can pull out within your HTML code. And if you if you want to just work online, there's a really good resource at code pen, which gives you the ability to lowered content and access it directly within that display area. So you can see that if you want to load in a G quarry file to try that eight that you could just copy and paste the script file. You can add Jake Worry from the drop down here within that dashboard. So I just went to that, uh, this spinning wheel here, and it opens up the Js setting so we can add in libraries that we want to utilize. I can also copy and paste my CSS in here as well. And then, of course, we need to get some HTML in there, so copy and paste that HTML. We can tidy it, and so long. And now, whenever I click it, we see we're getting that same information pulled through. And this is a really good resource because of the ability to to really flip through and see all these different AP eyes and if you've got, especially if you're querying into them. If you've got some dynamic capabilities, you can make some updates to those and really get some really good information and pull that back into your Web page. And of course, you can also style it. So if I want to text center, see that whenever I see that we see that it automatically shows up here within the display area. So even if I was to do a background color, and I know this is CSS, but we see that whatever I'm typing and here it shows up on the right hand side so you can also change your display video viewing area so you can go Editor Lee out. You can go above or to the right. You can also hide, thes and minimize them and just look at the JavaScript and so on. So it's a really good resource, and I do encourage you to try all the different source code that we've provided within the course. Check it out for yourself and see what you can do with Jason and AP eyes.