2020 AJAX API JSON Connect to JSON data using AJAX webpage | Laurence Svekis | Skillshare

2020 AJAX API JSON Connect to JSON data using AJAX webpage

Laurence Svekis, Web technology Instructor

2020 AJAX API JSON Connect to JSON data using AJAX webpage

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (1h 7m)
    • 1. 0 API JSON Introduction

      2:28
    • 2. 1 Introduction to JSON

      3:34
    • 3. 2 JavaScript Objects

      5:31
    • 4. 3 JavaScript Arrays

      2:27
    • 5. 4 Output Contents

      3:14
    • 6. 5 JSON Stringify JSON Parse

      3:01
    • 7. 6 Validate lint JSON

      3:05
    • 8. 7 JavaScript Fetch

      4:05
    • 9. 8 Fetch Web APIs

      2:36
    • 10. 9 JavaScript Arrow

      1:55
    • 11. 10 Fetch Options

      3:04
    • 12. 11 CORS with request

      2:28
    • 13. 12 More Open APIs Practice

      3:23
    • 14. 13 Fun with APIs Tools and More

      4:35
    • 15. 14 API Next Page

      5:31
    • 16. 15 Post method send data

      3:26
    • 17. 16 Practice API endpoints

      4:49
    • 18. 17 More API endpoints

      4:13
    • 19. 18 API JSON conclusion

      3:20
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

82

Students

--

Projects

About This Class

d6caf6f7

JavaScript for beginners JavaScript Objects and JSON data for web pages AJAX request for JSON data to use in JavaScript
Explore how you can connect to various endpoints on the web and get JSON data to use on your website. 

JSON data and JavaScript Objects

JavaScript Object Notation (JSON) is an open-standard file format or data interchange format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types. It is a very common data format, with a diverse range of applications.

JSON is a language-independent data format. It was derived from JavaScript, but many modern programming languages include code to generate and parse JSON-format data. The official Internet media type for JSON is application/json. JSON filenames use the extension .json.

AJAX ("Asynchronous JavaScript + XML") is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page.

In practice, modern implementations commonly utilize JSON instead of XML.

Course Covers

JavaScript Objects and how they are used in code to retrieve values and store groups of related data sets

JavaScript Arrays - a data structure commonly used in JSON to contain Objects

JSON vs JavaSCript Objects

Iterate Array Contents

JSON parse and Stringify

Tools online to help connect to endpoints and debug AJAX requests

Use of JavaScript Fetch to return content

GET and POST methods to web endpoints

Various examples of open web APIs

Source Code is included.

JavaScript Object

An object is a collection of related data and/or functionality.

Functions can be contained in JavaScript objects they are referred to as methods within the object.

JavaScript objects names don’t need quotes, can be single, double or none.

Values can be Strings, Numbers, Booleans, Arrays, Objects

Create an object setting a variable name and assigning the {} to the variable.

Object names can hold values of other objects and arrays

Can go multiple levels deep, as many as needed.

Dot notation : The object name (person) acts as the namespace, then a dot, then the item you want to access.

Bracket notation : Similar format to arrays, instead of using an index number to select an item you are using the name associated with each member's value.

JavaScript Array

An Array can hold multiple values

Arrays cannot use strings as element indexes but must use integers.

Arrays are zero based, first index value is always 0;

Array values can be strings, numbers, booleans, arrays or objects.

The design of objects and arrays is to hold lots of content. You can loop through the content in a number of ways using JavaScript.

You can loop through the data in the array using a number of methods in JavaScript. Arrays need the index to find the value associated with it. If objects are contained within you should structure them the same way so it is easier to check the values contained.

Objects have length so using a for loop is possible. There is also Object.entries which can get the key and the value from the object.

Keep data structured the same so that you can easily determine where the values are located.

The JSON.stringify() method converts a JavaScript object or value to a JSON string

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string

The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON.

Objects and Arrays: Property names must be double-quoted strings; trailing commas are forbidden.

Numbers: Leading zeros are prohibited; a decimal point must be followed by at least one digit. NaN and Infinity are unsupported.

Please note that the scope of this course using JavaScript and JSON data outputting via JavaScript.  If you are looking for a more detailed JavaScript course this course is not for you.  Simple course with limited scope designed to be topic specific.

Taught by an instructor with over 20 years of Web Development experience.

If you've been looking to get started with AJAX and JSON-  THIS COURSE IS FOR YOU!!!!

Nothing to lose - Fast friendly support is always available to help if you need it.

Please note that the SCOPE OF THIS COURSE IS Creating a simple API and JSON and will not cover complex commands and everything about JavaScript, HOW TO GET STARTED COURSE - if you are looking at more detailed node or JavaScript content this is not for you.

Meet Your Teacher

Teacher Profile Image

Laurence Svekis

Web technology Instructor

Teacher

Web Design and Web Development Course Author - Teaching over 700,000 students Globally both in person and online.   

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I created my first computer applications in 1990,... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. 0 API JSON Introduction: p I. Jason course, and in upcoming lessons, I'm gonna be walking you through how to access Jason Data connecting to various Web AP I endpoints and using Ajax to connect to those get some data and added into your Web pages. And there's gonna be a lot of practice as well as tons of examples in the upcoming lessons . So connecting to a Jason Data object using Ajax and then bring it back into your Web pages . My name is Lawrence, and I'm gonna be instructor for this course. I come to many years of Web development experience, and I'm ready to help answer any questions that you might have in regards to Ajax and Web AP Eyes and Jason. This course is comprised of a number of lessons with tons of examples of how to connect to the Web. AP Eyes is something that I often get asked for by students. They're looking to be able to connect to various endpoints and then use that data in their Web applications. So I'm hoping upcoming lessons help address some of your questions and clarify how to do this using Ajax and JavaScript code. The upcoming lessons air comprised of a number of exercises. We're going to start by introducing you to JavaScript and how JavaScript objects work. How weaken output the content of into the Web page. Also, how a raise and the various data types that are available within the JavaScript objects. And then how it relates to Jason Data. Because this is important, since Jason Data is based on JavaScript objects the same way. So pulling in Jason, where you can make use of various values, they're contained within these objects and then, lastly, connecting to various endpoints that are available on the Web. Also, some of the tools that you can use some problems you might encounter how to get content using the get method had a post content using the post method. And I'm also going to challenge you to try it for yourself and really get familiar with what content is being returned back and how you can parse through these Jason objects to get to the content that you want to use in your Web applications. If you have any questions or comments, I'm always happy to hear from you within the Q and a section of the course. I've included all of the source code, so there's no excuse for not practicing the code as you go through the lessons for you to try out for yourself within your own Web application. So I know you're excited to get started, so let's dive right in and start creating some amazing things with JavaScript. 2. 1 Introduction to JSON: Hi. Welcome in this lesson. We're gonna be setting up our Web page. Also, we're gonna get a brief introduction to what Jason is and how we're gonna be using Jason and Jason Data in the upcoming lessons. So this an example of some of the Jason data that we're gonna be working with later on? And as you can see, the structure is similar to what we would expect when we see a JavaScript object. And then there's also raise contained in there as well. And there's a number of different strings that are being returned back and numbers and all kinds of information is contained within this Jason Data. There's also another example. So we're gonna be looking at what's contained within Wikipedia. So they've got an example here where we can execute and it's returning back the content as Jason Data. And the reason that Jason is important is that this provides an easy way to transfer deed across different programming languages. So it's a common format that's used across multiple programming languages in order to interpret data, and it's all based on JavaScript objects. And that's what we're gonna be covering JavaScript objects, how they work and also JavaScript to raise how we can get the content out of those and use them within our applications. So we execute this, we're gonna get returned back, and a whole bunch of Jason and Data gets returned back. So sifting through this data and then pulling out the information that we want to use from this response And as you can see once again, there is a ton of information that gets returned back here. And I'm gonna be explaining this as we go through the lessons. There's more information about Jason. So Jason is actually short for JavaScript object notation, and it is based on JavaScript object. So it's ah more of a human readable format and allows us to transmit data. And it's more of a common format for date for data transmission. There's some history about how Jason came to be and different data types and syntax that are available. So if you are familiar with JavaScript, we know that there are data types like strings, boo leans, a raise, objects and no, that's all available in a job script. And these are available in Jason as well. Although Jason is a little bit more strict than JavaScript. You do need to include the double quotes in order to identify the name pair value suite at the name and then the value on the right hand side, separated by a semi colon. So this is a typical what Jason object would look like as well as can be used similarly a JavaScript. And we're gonna look at us as we progress through the lessons. So now let's go open up the editor and we're gonna create our basic file that we're gonna be using in order to write our code and then body tag and then within the body, let's create a did. And this is what we're gonna use in order to output the content from our Jason response. And we can leave that blank for now. Linking out Teoh, I'll create a brain you file. This is gonna be where we've got our JavaScript and save that as script gs. So that's where all this were all over. Code is gonna go. Let's link to that script Js as a source for the project and we're all set up and ready to go. So will refresh index, and I'll put a consul message just to say that we're ready to start and ready to go. So you see that message is displayed. So once it's set up and open up your editor, you could be set up to move on to the next lesson. We're gonna take a closer look at what Jesus is, how it works and how javascript to jump script objects are related to Jesus. That's coming up in the next lesson. 3. 2 JavaScript Objects: So before we get into all of this complex Jason and how we can loop through an output the content into the JavaScript, we're gonna look at what we can do with JavaScript objects and how they work. So an object is a collection of related data functionality. And with JavaScript, you do have the ability that functions. But within Jason, you don't. So we're gonna stick to keeping strings, numbers, billions, arrays and objects and contain them within a JavaScript object. So if we're to create ah person or a friend of ours and we had a collection of different pieces of information for this friend, we might have something like the person's first name. I'm going to use double quotes around it. And with JavaScript objects, we don't have to, but with Jason, we do so this name can be an object as well. It could be a string. It could be an object. And I'm gonna make it an object to make it a little bit more complex. So within the object itself, we're gonna have first for the first name. And then whatever the response is, Lawrence and then also last for a last name and then this will be the last name of that particular person and safe. And let's output friend into the consul. See what it looks like? So going into the console, you see that you've got friend, and this friend has a name. Also, information such as the first and last is all contained within the name object that's contained within friend object. You could also have additional information so you could have that possible age of the person. And you could also have the location of where that person is located. And this could also be more complex. So I'm going to continue with more of the Jason format. We're using the double quotes, and then I'll show you how we can limp this Teoh demonstrate that this is actually can be used as a Jason object. So putting in a location and a location is usually more complex as well. So this is more likely an object where we've got city and then for the city separated by the colon. And they might also have a country and these air just different ways that we're gonna contain all of this information within that same object. So I think we've got enough information for the friend so we can log out friend and can see what this looks like. So refresh. And we've got the name, the age, the location, and this information is really easy to draw. So if we do need to use the information that's contained within the friend object, we can also reference it. And there's two different ways to reference it. We can reference it with the DOT notation, so that returns back age and then we also have an option for a bracket. Notation and bracket notation provides us more flexibility within the coating, so there are certain cases where you might use the bracket notation as opposed to the dot notation. If this is something that could be dynamic of value, that might be dynamic and changing, it gives you the flexibility to make this dynamic and change. So you could potentially have a value of just put a value of vow and then this contain contain age. And now we can output friend and use the bracket notation and have age. That's already a string value of Al and we see that that gets returned. Doc is 40 whereas we can't do friend Val, and that's not gonna return back. Anything is going to just return back and undefined error because we're not able to find that value contained within the friend object. So that's where we have the flexibility with the bracket notation over the dot notation. And once again, it depends on how you're out putting the object information what you would use if you'd use the bracket notation or if you would use the dot notation. So if you want to output this onto the index page, I'm gonna output it within the class of output. We're gonna use the document Corey Selector, object, selecting the element with a class of output and in a sign of variable to that so output and equal that to whatever is the response there of the query selector. And now we can take output and text content to the output. And then from here we can specify friend. And if you want to get name and first we can have put the first name like that and then also we can add in the last name as well so we can concoct Nate that together I'll put a space in between and then instead of first will output last. And that way we can output the content that's coming from the JavaScript object, and we could reference anyone or any piece of the information that's contained within friend and use that within our JavaScript code. So go ahead and try the suit and create a new object. Add some properties and values to the object and then use JavaScript in order to reference the content contained within the object and output it within either the document object or just within the console. So just so that you can become a little bit more familiar with practicing and getting content out of the object, as we're gonna be doing a whole lot of that to be able to be able to dry out that information as we progress through the upcoming lessons. 4. 3 JavaScript Arrays: structure off the Jason data is really important. So if you do have a large number of items contained within a Jason objects such as we have here items you're going to notice that items is within an array format, and this gives the ability to have multiple items with the and as long as they do have the same structure. So they all started with I D than they've got a name and a full name and so on. So we're going to reproduce this and instead of friend, we're going to call this friend one. We're gonna copy all of that information and create another friend, which will be friend, too. And this one is gonna have slightly different data that ELISA and we'll just update some of the contents here that we've got mawr of, ah, range of data that's contained in here. And we're gonna put this into one larger object. And I can get rid of some of the code that we had there last time and will create another variable calling this one friends and this is gonna be on a rate. And right now this array is going to contain two objects. Is going to contain friend one and friend to and noticed that the structure of friend one and friend to is exactly the same. And this is important when we try to access the data that we can use an index value within the array and select the value the friend that we want to access. So let's refresh this. And now you can see that both of them are output within the same format and either one weaken go to using the index value, Go to name first and that will return back Lawrence and the other one with the index value of one weaken do name first and that will return back. Lisa, let's try that. And we've got our friends, and we're expecting this isn't a race. So we need honoree index value and then going into the name object, and also then we're going to return back first and keeping the structure the same. This allows us to really easily output any piece of this content. And that also means that we can a loop through the array and put the content contained within that a rate. Use that within the code itself. And that's what I'm going to show you in the upcoming lessons how it can iterated through the contents of an array. And this is an example of how we can get more information and how important structure is when it comes to constructing these large data, Jason Data objects. 5. 4 Output Contents: in the last few lessons, we created a sample off some data that we can use, and then we can output this data. So this is a sample of what the Jason Data might look like in its away, simpler example than most of the Jason dated it again encounter. So this is the one from Get Hub that have been using in the last few lessons as an example . And we can see there's literally just tons of different layers here where you can dig down in order to access each one of these items. There's so much information contained within them, so it's really important to be able to traverse through the different layers and return back the content. And that's where the structure is super important because we want to be ableto output this content out into our JavaScript code. And that's why, right now we only have two friends. But what if we had 100? What if we had 1000? We need a way to really easily get all of the first names, and that's where we can use a loop. And as long as the structure is the same for each one of those objects and we know that it ISS because I copied and pasted. Of course, then we can loop through that friends array and output the content that's contained within each one. And I'm gonna use for each in order to do this and creating a function. So this is going to return back each one of the items, each one of the friends, and I'll just call this friend because this is going to be each one of the single friends that I have contained within the rape. And then I got take output, eat the inner HTML. So whatever the existing Inter HTML is will select the friend object and then output the name and whatever the first name is that's contained within that. That way we can output that content onto the page. And let's use I some tactics. So the template liberals in order output the content and that way that allows us to use the spaces and then to add the data object. And we can contain all of that together. So it gets rid of using the quotes of what to do the first name, and then the last name we could out put it like that onto the page, and the nice thing about it is that there's so much flexibility. So even if where you've got three friends, if we've got Friend three and that one gets added to the array, I know it's gonna be the same as the other friend. So let's change some of these names and we'll have them in the same location. So this is where it's important that the structure is the same and nuts, because I've got quote missing there and now out putting that information So it doesn't matter how many friends we have that are contained within the object. We can always output all of them. So coming up next, you might encounter that returning back a giant Jason object, and it's within a string. So it's not as identified as Jason. And there's a way to parse that, and also to turn JavaScript to Jason object into a string using Jason String. If I so, JavaScript comes with a few methods that are going to be really handy when you're working with Jason objects and that's coming up in the next lesson, 6. 5 JSON Stringify JSON Parse: Hey, in this lesson, we are going to be looking at Jason Parson Jason Stratify. So sometimes we connected these Jason objects. It's gonna come back as a string, and then you need to convert it into a JavaScript object that you can utilize. So a console log out friends and the way to tell the difference between if it's a string or if it's a JavaScript object. And usually I just Consul Law, get out the response that comes back from the Jason A. P I. And you can see that if you can traverse through the content like this within the console, that means that it's an object. So you ready to access name? Just like we saw in the last lesson. We can access the content contained in there. So what if we have another value and I'll just call this one f friends? And this is gonna be equal to Jason String if I and it's gonna string? If I, the friends, object in all Consul like it's as friends will be able to see the difference. So this is on a string version of the Jason object, and as you can see, I can't do the same thing where I can access name first and get that information return back. So if I was to do on s friends and do name is going to return back undefined because it doesn't actually exist. And that's because that this is just a regular string object and it contains its treated just as a string. So it is a strength. It's treated as a strength in order to convert it back. So sometimes you will get your response data. And if it's this one big chunk like this in the console, that means that you're not able to access the information contained in the object, and you need to turn it back into an object. So let's turn it back into an object and I'll create another variable will call this old friends and using Jason parse the juice on parses the opposite of the string If I and I'll take the s friends. So this was the string value and turn it back into an object. And now we're gonna be able to use old friends as an object in our JavaScript, so has successfully taken an object, turned it into a string and then turned it back into an object. So if we type in old friends, this isn't an object format, and remember, it is it will generate. So that means that we have to do old friends select the index value that we want to use, and then we get the contents off the values that's contained within the object so you can get friends. Zero index value of two age. And that's returning back the age of this friend here for a number three. So once you have it again within an object format, it's really easy with JavaScript in order to make use of the contents off that object. 7. 6 Validate lint JSON: Hey, I hope you're having fun with Jason and Javascript objects, and we are getting to the more of the Jason and part of things. So now that we know that we can get javascript objects and we can get the content out of them, that means that we're ready to look closer at what we can do with Jason. Now, it is important that your Jason the data is properly structured as Jason, remember, you need to have the double quotes for the names and also for the values of their strings. And if their numbers off course need the quotes, the same ideas when you're writing the JavaScript code that you can need to quote around the strings and then also need to quote around the names and it has to be delicate so you can't do single courts, it's no longer going to be valid. And we can take that giant javascript object and go over to ah validator. And this is commonly used to make sure that your Jason data is valid before he tried to use it. Otherwise, you're gonna throw some errors or unexpected errors. So I just copied and pasted it as a string and to the validator. The validator doesn't care if it's a stringer, an object. It'll take that information and it will validate it. Jason content. And this is what you want to see. You want to be valid Jesus, and that means that this is a valid use on object. So let's say, if I was to update this and do single quotes here and a do validate Jason, it throws an error because with single quotes, it's no longer valid. Jason object, and then it gives you an error message here within the results. And this will help you troubleshoot it at very super useful if you have these large, massive Jason objects that have a thana data and you might not be able to easily spot where the errors might be sitting, there's also a really nice resource that I use all the time. And that's the my Jason dot com. And this is a great place where you can store your geese on data so you can post the Jason data, and I'm just using the string values and just posted here. And this is also gonna do limping to make sure that it is valid Jason. So if you tryto create my Jason, that's not valid. J son, you're gonna throw an error, and the course is enabled. So this is And when you save it, it's going to give you a U. R. I toe access your Jason directly, and you are gonna need that for the upcoming lesson. We're gonna access this Jason object and then pull it in from the Web file and use that within our code. So that's coming up next. So go check out my Jason dot com, create your own Jason file. Make sure that it is valid. You can use the Jason lynda dot com or you could just simply paste it in here. And if it's not valid, you're gonna throw an error and you're gonna be ready to move on to the next lesson. We're gonna make an Ajax request and return back this Jason Data that we've been working with so it's no longer going to be sitting in our Js file. It's gonna be sitting online, and we're going to use fetch in order to access it 8. 7 JavaScript Fetch: we're able to create your my Jason been and copy the URL. And if you haven't, then go ahead and do that. Could use you are gonna need to have the URL in order to connect to it in this lesson are going to use fetch in order to do that. So we have an opportunity that to clean up a lot of the code that we had and removing out all of this stuff here that where we had all of the data and I'm gonna also route the consul messages. And we don't need all of this string if I either. So it's really simplified the code and creating a fetch request. Actually, we're gonna put the u R L into a variable. So it's really easy to access and then write the fetch request with the girl. So that's where are my J saw data is sitting. So making a such request to the U Earl and fetches promised Beast. So it's gonna week Teoh establish that connection and then it's gonna return back a response object. And that response object is gonna be within an object format. And there's also an option to return content as Jason. So this will directly return the content as Jason to the next promise, and then we can pick up that content. And this is where we can use the actual data within the fetch request and we can output that data. And for now, we're going to just console log the contents of that data. So going back into the application, we have access to the same data that we had in the earlier lessons. But we've got a whole cleaner file. We were just simply accessing it online from the Jason file that we created the data into. This is the same thing. If whatever your end point is, if you've got a back end database or it's putting content into a Jason format, you can pick it up from your front end code from your website and then use it within your Web page, so show you how you can do that as well. Where we've got the contents in Davis isn't array, so data has a length, as we see in the console. That means that we can use for each to loop through each one of the friends. And just as we saw before our console, log out, friend. And then, well, I actually put the contents off the data into our web application. This is all gonna be coming from the U. R I the my Jason bid. So we have all of those objects as friend. That means that we can take friend name and we can also get first, just as we did before. So you can get all of the first names and the and thinking again where the structure is so important when you're out putting it in this type of format. So let's take output inner html and updates that inter html going to use the back ticks take the value of friend first output it as a template literal and also last. And then I didn't a line break. That means that we can pull this information really easily out from each one of the users. If want to add in age, we could do that as well, so age was contained within the object. So it's just within friend age, so you can output any piece of the data that's contained within the U. R I and use it within your Web application. And this is all done with an http request where it's making the Ajax request to this. You are. I end the server on the other end is simply just out putting the contents of the U. R I. So if I was to go to the Web page the end point, we see that's within a string format and simply returning back the contents in this string structure and fetch is able to take that string value and a JavaScript object that we can then utilize in the coat, taking their request data that's being sent back, and it's being returned back as a response that we're using in our JavaScript code. 9. 8 Fetch Web APIs: now that we know how to connect to Web AP Ice. Let's connect to the get hub, one that we've been working with, and we also do you have to do a little bit of clean up here, so we just want simply were turned back. The data contents. Let's go back into where are local machinists and we see we've got a total count of 1780 the items that are available. It's gonna return them back into chunks of 30 and then there's also next next, next that you go to the next set of items. So that's all contained here. And typically this is contained within the A p I. So it's the items that we have a length on, and this is where the array is. So it's items that we could potentially loop through all of the items and this is returning back 30 items. They all have an I D. So that means that if we do data items and this is where it can apply the four and function item and being returned back, and then we can console log at whatever is contained within item. So this is the breakdown of each one of the item objects and this in itself. It's got a lot of data. If we only want to see the I DS zero turned back them ideas as numbers. And if we want to just put these in the code, that's really easy to do as well, where we take the output and inner HTML and using the template literal again, item I D. And let's put that into the Web page. So now we've got all of the I. D. S, and this is coming from the get hub as a data source, and they're all going to be different. So, depending on what endpoint you're connecting to, always pulled back the full response data. And then you can use your consul to break apart and select content that you want to pick out and use. So you can also update this, and this could be description as well. So if you want to output all of the descriptions, and that's where you can pull the description content directly into your Web pages, if that's what you're after, you can also update and use the different girls to where the repositories are and There's really endless things that you can do, and this is all dependent on what you're trying to do with your Web application and what you're trying to accomplish. And the data that you're after and you wanna output, Go ahead, tried it with get up and coming up. Next, I'm gonna update the code to use the arrow functions says. Then you're format. Instead of typing out function and return, it's gonna simplify the code using the arrow functions, so it's coming up next. 10. 9 JavaScript Arrow: welcome back in this lesson. We're gonna do a quick updates and modernize the code that we've been writing. So this is gonna remove out the word function and have our responses using the arrow method . And it gets rid of quite a bit of the coding where we've got the response and then using these arrows when you were four months, we can then return back the content as Jason. So this still works the same way. But the code looks a little bit simpler. It's, um, it's written simpler. Also, let's update the other functions with this as well. Really. It's just a matter of removing out the word function and then updating the other bracket and save that just to make sure it's still working. And we could do the same thing for the for each statement. And this is becoming more of a common format for instead of writing functions. So it's more of a shortened format. There's also the other part of fetch where if there are errors, you can catch any of the errors that are happening. And so whenever these promises, if any of these fail that we're going to return back the error. So taking error and then the response back from the air, we can console log that whatever the error message is that's contained that's being returned back and save. That means that if we had any problems with her a p I, we'd see that we did have an error message that was thrown. So this is the part where the error got throwing in our source code. So if you click that, you could take a closer look at what through the error, and that's coming from 11 from Line 11. So that's being logged out there. So it gives you the ability to handle errors in the code better, so make sure you do include the catch in your fetch request. Let's at the A P I back in so that it's working, so we've got the connection 11. 10 Fetch Options: in this lesson, we're gonna show you how you can send various options so you can make the best fetch request and include some options along with it and by default fetches using the get method . But you can set post method, and that's contained within the options. And the options is an object, so you can specify things like the method and as well as additional body information. If you're making a post request amusing get requests. I'm just adding in the method of get and you go to see it still works the same way. So this object gives you the ability to update and add different parameters that you might be that you might need to add into your request. Let's go over to see what's contained within the A P I for wiki media. They had an example here of Ah, you Earl that we can use and we can take this. You are also this is the request you Earl and that's the details that are being returned back from the request you Earl. So if we were to paste that in, we see we've got return a response there, So let's try that and instead of the get hub will pull the information coming from the wiki and a sewage. It gets returned back in our court. So we've got an undefined. That's because it's not always structured the same way. It's coming back as data. And that's what I mean, that you always have to return it back as the response data. And then, if you want to find out more about what happened on this day, this is where the array is so on this day. And this is where you've got there, Ray of all the contents so you can take the content and it's just simply text. There's a number of different pages as well, but we see that we were turning it back as text. So all the different values are being returned back as text and now taking data on the state for each. We can loop through the contents of each one of these items and I'll call that date and will consul the contents of day. So we've got each one of the days and simplifying it again, using the arrow method, returning back the content the same way and we soon got day text is the content that we're after so we can pull in this information and output the content of whatever happened on this current day coming from the wiki a p I, and we cannot put it out to our web page. So let's do that now. So outputs inner HTML and I'm gonna just come, Captain eight to the inner HTML and day text is the value that we're trying to return back and then do a line break. So you've got all of this content coming from the A p I to try this one out, and it's always good to practice all these different AP eyes and see what kind of data you can return back and challenge yourself, Teoh. Get different pieces of data and make richer information being pulled back on your Web page . 12. 11 CORS with request: this lesson, we're gonna be exploring what happens when you see this type of error. This is a cores error. That means that there's a problem with the cross origin sharing, and this is something that is sitting on the server side. So it doesn't matter what you make the request for. On the server side, it's blocking such types of requests. There's a number of different ways that this can be set up on servers. Servers can allow access Teoh Onley to specific domains, or they could allow access to all. So some AP eyes you might encounter. You're going to run into this course issue, and there is actually a really nice weight around that, and that's using the course anywhere from a Roku hop dot com so you can find out more about it and what's available. So if you go to the website that they've got listed here and you can type in a URL and you can see if you can get around any types of cores issues. So I've got an example off, uh, open weather map dot org's where if you go to the website and if you go to the Web, Buehrle in your browser. You're going to see the Jason Data. But let's see what happens when you take that same you, Earl. You post it into your application, such as I've done, and I've got the exact same mural that I have here. Some simply copied and pasted it. I'll do that one more time just so you can be sure that we do have the same girl. If I go into the application, I'm in counting this Coors beer, and this is that there is no control allowed origin s. So that means that it's not allowing us to connect to it on this domain. And this is the local domains. That's why we're encountering this issue and the way to use the cores anywhere. Roku, is that you just place that in front of whatever the URL is that you're trying to access, and then when you refresh it, you're gonna find your able to access the contents off the A p I. So now you can take the information that's being returned from the A. P I. And work with it locally. So this is just a quick solution. Teoh, if you do encounter that cores error that there are ways to work around it, and in some cases you might not be able to bypass the cores. And that's why it's always important that you establish your access to the A P I properly so that you won't be encountering any of the cross origin issues that we've demonstrated. 13. 12 More Open APIs Practice: Hey, just a quick warning. If you get offended by rude jokes, then you might want to skip. This lesson is we're connecting to an A P I that might have some adult content contained within the responses of the A P I. Hey, welcome back in this lesson, we're gonna be connecting to some or AP eyes and just having some fun with the contents of There's various open AP eyes. There's another free Jason AP I that's available, and it provides you some Chuck Norris jokes. There's different endpoints. If you just want one joke, you can just get a random joke at this, a p I so you can try this out for yourself. You can pause the video, return back the content, go over to chuck Norris dot io and check out what's available in the A P. I output some of the content. So first put one of the jokes onto the page every time the page loads, load a random joke into the contents of the page, and I'll walk you through how to do that in this in this lesson, and then we'll try out some of the different options that we have where we can search and we can return multiple pieces of data as well, and then output that information as well. So see, we've got the contents being returned back, and this is what gets returned back. We've got value and thats where the actual joke is being contained. And that's the content that were after. So looking at saying some of these jokes might not be appropriate, so just minimize this and going back out here. I can't output that value into the consul into the inner HTML as well. And then that's whatever is contained within data value. We'll just do a quick refresh, and we saw that there's a number of other options here See can actually search by category , and then you can also have a number of different categories, and then this is the nice one. Or you can do a full search so you could do a full query search. So let's try that one as well. Eso whatever. Want to search query? That's the option here, so it's just too big as a word, and this will give us more content that will have to loop through. It has got to make sure that it's a valid you earl or throwing an error. There s so we don't get anything back for data value because it's returning back in array of contents. So all of the contents are contained within the result. All right, so put the result of rate. So there's our all of our results so we can go through the results and we can return back the content contained within their results. And once again, it's within the value. So this is where we can use data result and for each and loop through the contents and returned back each one of the jokes as a value of joke. And let me shorten this. We'll use the arrows and output the contents. And for now, we just don't put it into the Consul. So returning back joke and then each one has a value associated with him. We get all of this information and you could just as easily have put that information into your Web app. So try and it and I've got a few other examples coming up in the next lesson. So it is important to just check out these different Web BP eyes. Try a Getting the content is they're all going to be different and return the content. Use it within your Web application 14. 13 Fun with APIs Tools and More: Hey, welcome back In this lesson. I've got some more AP eyes as well as some useful tools and give you another opportunity to practice a boat. Returning back data from AP eyes in that Jason Data and then out putting it within your Web application. Three Ajax requests. So this one is located at r E Q r e s dot I am for it slash ap i ford slash users. So we did the same format where we updated the URL and out putting, returning the data back as Jason and then out putting the response as data in the log. And for this one, all of the content is contained within data has got various random user names. So let's try to output the contents of data and data data for eat the optional function. Returning back the object name, not just return it. Bacchus Person, Consul Law, goat. The values that it contained within person s o this one as well has an avatar for each one of the people. So how about we output the avatars onto our web page? So using that output, inner html and then the tactics and this is going to contain an image source and the source value is going to be contained within person. Avatar. Now it's returning back a bunch of users, so we just got the one. So far, that's what we need to Can Captain eat Sharebuilder turned back people's pictures and coming back from this users a p I to try this one out as well and have some fun with it. Return back some of the content that's contained in there. I also want to take a closer look at some of the tools that are available, and you probably heard of Postman. But there's a newer one. It's called Post Woman, and the sun is actually une easier one to use than postman because all you have to do is go to the website. You don't have to set up anything and you've got your selection of the various methods. Then you've got your girl, the path to the euro. You're also able to add in some options, passing some headers and parameters, and this is really good when you're using the post method to try out all the different options that you have within the methods, and then once you're ready, you just hit send, and this gives you the returned results in a nice format that's easy to use and also gives you the content. Types of the content type that we're expecting is Jason. Status code is 200. That means that we're able to connect to that a p I. So you can also add to your collection so you could add all of these endpoints to your collection, and that will give you a whole bunch of items that you can collect on this website. And overall, there's a lot of really useful tools that make a make use of when you're connecting Teoh various AP eyes. Let's go over to another popular testing a p I. And this is Jason placeholder dot com At type coat. There's more information if you click guide so you can actually do posts to it as well. Yes, this is the girl, and this is the one that receives the posts. Noticed that in the headers there's a content type, so let's go back into the post woman and use a post. Get rid of the path we're not going to need the path, and we can add in various parameters that's to ascend. See what's getting returned back. So by default, it always returns back the I D. And we can add in various parameters here. So if we had a title value and we want to send that, it's just going to simply place that in as a post. So this is just another way to practice and see that just a different ways that you can work with the content contained within the endpoint. It's different ways that you can send and post content to it. So there's also put option, and you can try out the put within post woman sending over data and putting it, and you're going to get the response back. There's also deleting resources. There's patch is a number of different methods that we haven't covered. As you mean they've been looking at get, and that's the one that gives us the ability to simply connect to an end point and return back the results. But the post and put on other methods, give you more options to interact with the content, and you can also try that within your editor as well. Seek and copy and paste content into the editor and run the code locally to see what kind of results you're getting when you make the post request 15. 14 API Next Page: in this lesson, we're gonna be selecting on a P I that has a bunch of values that we can move to the next. So this one, we want to pull it all of this information and loop through all of the values, the next additional pages. So let's do that. And we've already set up that you are else. This one's a fairly complex. You are l It's running from a Google AB script Web page, and we want to create a function that's gonna load the page. And this is where our fetch request will sit. So I'm just gonna have it on the route, and we're gonna call to it to load the page from the global object. And now let's set up the fetch request within the global page. So a consul leg out whatever the value of page is, and I'm gonna just use PG instead of page because we're using the global object of page to avoid confusion. Let's create a temporary earl. So taking out this base URL we're gonna add some parameters to it. So the URL plus and the format is PG is gonna be whatever the page value is that we want to load. So I'm gonna just add in our PG value into that and we could make the fetch request to the temp Earl and will include the method options in case we want to update those as an object . So within fetch the method that we want to use, we're just going to use the default get because that's all we need because this is available within a Web URL and this is also returning back Jason Data. So responses already gonna be formatted as Jason Data. And that means that we can return the response as a Jason object. Then when we've returned out Jason object, we'll take it in eyes data, and this is gonna be the final response object. And for now, we can console log data and sue about looks like. So we're turning back the contents of page one and we see that it has a page next, and it also has some contents. So let's create another function that can handle the output of the contents, and we'll call this function the load page data. It's gonna request parameter of data and then within here is we can first will console log out the contents of data as we When we get the response coming back here as data we want out, put it onto the page. We already have the output object set up, so we need to just take data and lived through for each of data and return back value. And with that value, this is where we're gonna output the content. So using output, inner HTML will continue to add to it, and this is gonna be returned back within an injury. So a little bit different. But sometimes you will encounter these variations so returning back within an array. So if you want the first value from the Ari, we just give it an index value. And if you want the 2nd 1 and that's it, I'll just leave it at that and do a line break. And so once we have the data returned back from the fetch object, that means that we're going to send it over to the function and output it. And it actually wasn't structured properly because it's actually data and another object inside called data. So that's the one that we can loop through, and that outputs the contents that are contained within that Jason Data. So we also want toe introduce moving to the next pH. So we want to loop through until we're out of additional pages. So until the object that's being returned back with PGS has has a null value for next. And that's gonna be when we know that we've looped through and we've picked up all the data . So because we have it within a function, we can do a recursive call back to the function. We're checking to see if the data object that's being returned and going under P. G s and next has a value. And if it does, that means that we can actually move on to the next page. So we'll assign page the value of Dita P. G. S and whatever the value of next is and this could be a numeric value. So in this case, we're going to sign the value of 22 page, and that means that we can load the page function so we can call to that again with whatever value we've got contained within page, so that will allow us to load all of the data that's available within this a p I and we see that it builds up as we get those responses back and we can output all of the contents that are contained within the FBI. So this is just one way that you can handle the next. Just be careful that if you've got a lot of data that you're returning back there, a lot of pages, you might want a limit to How many pages you assume might have one. Have another condition in here that maybe, uh that and pages less than 10. So that limits the number of pages that you're going to return back. So again, it's up to the A p I. And it's up to what you're trying to do with the content contained within the P I to try the suits and sue ikan doing. You can load multiple pages of content from an endpoint 16. 15 Post method send data: this. Listen, we're gonna show you how you can post data to an A P I end point and the a p i endpoints is going to be the same one where we just picked up. So as we send a post request to it, we can actually add to the A p I so we can have an I. D. Number that's going to get returned back and we can keep it within the same format. We're gonna add two pieces of content to the A P. I s Oh, this is gonna be something. We're going to use the same code because eventually we're gonna want a load and check to see if we've got the content contained within the FBI. We're going to simulate adding information from a web form. So set up a ray Discovery Justin Array that's gonna have some values that are contained within it. So whatever values you want to send into the a p I s o, it just needs a couple string values and we'll call it test 1000 and another one, That's all we're going to contain within the A p I. We're gonna send this information over to the server to set up form data object. And this could be done in JavaScript with new declaring a new form data object. And let's add some content into the form data object by a pending content. And the content that were pending is gonna be the new string of data. We're just gonna have our regular string data and then using Jason String. If I were going to pass in the contents of the array over into the form data, now we can use fetch, and we're going back to the same girl. So it off to update anything there. Although we are sending over additional parameters here that in the headers and we can specify the method so the method is gonna be to post and the body contents are gonna be what's contained within the form data object. And then we're gonna be returning back the response content as a response object and returning the response as a Jason object that we can use that we can pick that up in the next promise and picking it up as data using the fat aero using the arrow function, and we'll just simply log it data that's being returned back and I'll update This one is Well, let's try it and see what happens. So we're able to deposit that information. We were got returned back an I. D. And this is the information that we've sent over to the database, and now we are ready to load the pages. So we're gonna load the pages within this promises once we send the data that will kick off the loading of the pages. And then in the end, we should see the content that we've sent over. So there's the information that we sent over, and if it should match to the I. D. Number that we got, there is a response back from the post. So that's how you can practice posting content. And this could also be content from a form so you could create the ray from whatever contents of the form. Remember again, they're all going to be different. So all these endpoints could vary how, what type of data and the data format that they're expecting, And in this case, it's expecting an array and just going to simply deposit these values into the various cells that are available within the database 17. 16 Practice API endpoints: this lesson. We're gonna do some practice and there's another jokes. AP. I said joke stopped one for it slash ap i ford slash joke So it's got a number of different AP. I said you can connect to it also has some examples of code they're not using fetch. They're using the XML http request object. That was another way that previously that we would make requests and this is kind of going away because now we're more in tune to using fetch. But again, this is another option, and it works the same way where it makes the jacks request to the end point and returns and returns back the results. So this challenge is to pick up the joke of the day from the animal category and out, put it into your Web page, and I'll walk you through how to do that. So again, it's that jokes about 14 slash AP I, for it slash jokes and joke of the day is J. O. D. And this number of other endpoints. He could see all the different endpoints that available, so it gives you the endpoint there, and it also gives you the different categories that are available, and it will provide you bunch of different jokes. Us. This is the paid part. So here you have to pay for these jokes, so try it out to pause the video and walking through the solution. So we did want to pick up the joke of the day and category of animal. Let's try that, and I usually like to establish and set the earl first, so they have to worry about what the u. R. L is and usually like to have a function that contains the fetch request so that I can trigger the function either by event, on the page. So let's take the output and add an event listener and the listener will be a click, and it will run jokes on DSO. That's it. And let's also add some content into output. So I put text content, get a joke, see what our webpage looks like. So get a joke and it's running the jokes function, and then within here. This is where we can do our fetch request to the U Earl. And once we do the fetch request to the girl, we can return back the response data. We're not gonna set the different properties the method of get, because by default it's gonna be get. So just keep it short for this one looking for response data. And then when we get that response data, we're going to return it back as Jason. So don't forget to type in return. So it's sometimes a mistake that people make were they don't put their return in there. And then they wonder what happened, how commitments it didn't work out right? The next. The next promise. And this is where we've got the content coming back in as data and you can use the data. And first, well, I put into the consul to make sure that we do have the content coming in and we'll see the structure of the content as well. And that will give us guidance on how we can output the content. And this was a method. So make sure that you do the rounded brackets there, so it looks like we're able to success and returned back a total of one. And then the contents is joke. So it's an array of jokes, and we're only getting the one joke. So let's make sure that we're going down properly into the console and I'll just do a separate line for these. So it's all located in data contents and then under jokes. And this isn't a race. So joke number one and then within here it's the description is I would do. It looks like we have a title. So we have under Let's see, let's see how far. Because this one is actually fairly deep already. Eso we've got the description and then under description or under jokes and jokes, joke and then title. And that's where believe we ever joke. So let's try that one. And sometimes, depending on how long these are, they could be fairly difficult Teoh get ahold of. So it looks like we're able to successfully pull out the joke of the day. Ah, and then it's just a matter of putting it into the output area. So outputs and I just do text content because we're not gonna do multiple lines. And yeah, this one is a fairly long path to get to the content. So we click it, it should load the joke instead of get joke. And then every time we click it, it makes the fetch request once again. So I've got a couple other ones coming up in the upcoming lessons. It's all to get the practice in order to return back content from these various AP eyes. 18. 17 More API endpoints: you haven't checked, it's stock overflow. Then you should. If you're a developer, there's a lot of information contained here on. They also have a really nice AP I that's is perfect to practice connecting to various AP ice, so they've got the answers here. And if you go to a p i dot stock exchange dot com for it slash docks, you can check out the various parameters in the various AP I endpoints that they have available for you. So the objective of this lesson you can go over to the a p i dot stock exchange dot com four slash docks and connect to one of the AP ice with various answers to the questions and make sure you check there with ones that don't have the authorization that's required. There's also badges, comments, events, posts. So go over here and return back some of the posts into your Web application. Doesn't matter any posts. You can even do questions or comments, so whatever you want, return that information back into your Web application and I'll walk you through the process coming up so positivity you hear over and tried it initially. The solution. I'm going to do posts. It's got the A P I here and all of the post information so you can select different pages to start on and will update the A P I page size. So if you want to get 20 items, various dates, order activity. So I think this is good enough and we can do a run to see what, what? It's gonna be returned back. And it's nice that we can see the way that this content is gonna be output eso In this case , let's output the content off the owners display name for each one of these posts. And I copy this roots this endpoint and we'll update the content contained eso it's not Get a joke, get users and I'll update this to be users as well and will update this to be users as well do the touch. So get rid of some of this stuff here and we're gonna always start the same way we're making the request, were returning back the data and then when once we see the data in the console, then we're ready to go. So I need to specify the URL and the u R l for this is gonna be the stack overflow and a P I stock exchange is gonna be the http request address. So it's a P. I stack it change dot com for it slash post. Let's see what gets returned back in the application. It looks like there was a problem with the girl and sometimes to you need to try that and see what gets returned back. The copy the u R L and let's pieced it so Looks like it's working now that when we click, the get users were turning back all of the users. It's being returned back as data items. Let's try that now, once against, we've got a list of all the items. So now we have something that we can loop through. So do data items, and the sooner we can use the for each and we can loop through and return back the value of each one of the items contained within the response, object and console. Log them out. So we can, of course, take a better look at what's contained within them, and we want to return back the owner's name. So under Val and display name. So this gives us a listing of all the display names, and that means that we're OK to output it. So let's update the inner HTML and concoct. Need it? He's the template liberals. And again, this is fairly long. So we click, get users returning back all of the user values, that air matching this endpoint a p I. So this is just one of the options that you have. And as you saw, there's a ton of different endpoints that can be picked up. So I do suggest that you try it some of the other ones as well. And just I put the data within your Web application. It's always great practice and to get more familiar with what's available within the FBI's . 19. 18 API JSON conclusion: great job on making it to the end of this section. So we did cover quite a bit through it. The earlier lessons and we essentially found different ways to connect to the endpoints and pick up data that's contained within those eight endpoints. Sift through that data and then output the actual content that we want into the Web page and all of it was doing and using fetch making fetch requests. So by default, most of the content was Just get that we were doing, the method was get and we will access the endpoints, and usually the format is the same. The way that I usually like to do it is I get the URL, and then I make the fetch request to the U. R L. I return it back as Jason, and then I take a look in the console and I see what the output looks like in the console. So one this allows me to validate that I've made the proper request and I'm not running into the cores, errors or any other issues or any girl issues or it's not typed properly. And we did see a number of different times when throughout the lessons that maybe we didn't work properly. Eso It's always good to be able to copy. Paste it within your your Web browser. Make sure that you're able to see the content in the Web browser. And then, generally you should be able to with a get request. Access that content in your Web application. There's also various tools out there. There's Postman Post Woman, and I usually find that post woman is a little bit better because it's straight to the point. You could just go to the website and you can add your girl that you're trying to access and make the send request. And then also you could make various collections, notes and so on, so it's a great way to debug and access the various endpoints. So once we've established that connection to the end point, we return the data back as Jason output into the console. And this way we know we've established the connection proper and next it's sifting through the content and looking for the content that we want to return back. And in this case we had looked at and we want to get back the user's name, we could also get things like the image, and all of that is available under owner eso any number of items that we can access. And it's all about the planning and returning back the rate data that you want to use within your Web application. So go through and traverse through until you get the right object property value that you want to output in your Web page. And once you do, the next step is just connecting to the dom and then writing the content into the page elements on the page. And that's how you can connected AP eyes. Get content into your Web applications from various sources. If you have any questions or comments, I'm always happy to help clarify them within the Q and A section. And as for the various AP ice that we tried out also do suggest that you try the moat for yourself and get more familiar with returning back various data sets from them and put him in your Web page that practices always could be very valuable because every AP I you're going to encounter is always gonna be slightly different, and it's a matter of trying to dig down into the data and return back the right piece of content. Thanks again for all of your support, and I really do appreciate it. I'll see in the next one.