APIs & fetch

[00:00:00]
>> We said that there are lots of things that take a lot of time in JavaScript. One of them that is particularly relevant and punny for our dog mission today is fetching data. And like this, little dogs, we need dog or whatever it is. It is using a computer to do what it wants.

[00:00:22]
And that's what we're gonna do. We are gonna use the computer, we’re gonna tell JavaScript to make the browser fetch the data that we need. So let’s talk about how we get data from the Internet. [LAUGH] URLs, we’ve seen them, we’ve used them, I've told you to go to them multiple times, so far.

[00:00:41]
They point to certain resources on the web. So for example this one points to, it's cut off, but it points to a JPEG file an image of a bluetick dog breed. I don't know that breed, but apparently it looks like that it's cute, I think, anyway, so images or, web pages or whatever we know URLs.

[00:01:04]
And when we're writing code, especially JavaScript web development code, we also work with a lot of URLs. That are pointed to not maybe like a webpage or an image or something that we care about, but even just data, just some data that we care about some information. And API's or application programming interfaces, are services that are exposing a whole bunch of data at certain URLs.

[00:01:37]
So, in web development, in JavaScript coding out there in the world. We end up doing a lot of finding data that we care about, or that we need for our program to work, from somewhere else out there on the web like an API. So for example, the very fun dog.ceo website has a dog API that not only serves up cute dog pictures, but also serves up some information about for example breeds.

[00:02:11]
In fact, that's where I got all of that information for that big long breeds array. And one of the things that we can do, APIs usually have a certain structure that the API developer. Or the company, or what have you that maintains the API will document and they'll tell you what the structure of their URLs is.

[00:02:29]
But in the case of dog ceo, I can find data that I care about, like let's say a list of all of the types of hound breeds, by going to the URL, dog.ceo/api/breed/hound/list. And that is what's called often an end point of an API. Meaning a URL within the API which is a whole big set of different URLs, an endpoint is one of those URLs that gives me a particular usually it's called a resource.

[00:03:04]
In this case the resource that I care about is a little JavaScript object, that has some information about, in this case, a list, or an array of types of hounds. So, and if we want to check in our browser, I mean in our browser, we're used to going to web pages and URLs all the time.

[00:03:29]
That's not what I meant to copy. We can go to an API endpoint and see what data that API returns. And depending on what browser you're in this might look different. But if you can see here, when I enter dog.ceo/api/breeds/hounds/list, Firefox displays the information in this way. It shows me that the resource at this endpoint is a JSON object, JSON stands for JavaScript Object Notation.

[00:04:04]
It's basically just a convention for how we can represent objects that are very similar to the objects we've been working with this whole time. So that we can kind of save that object as a piece of text that I can then send across the wire. And my browser knows how to read that, and parse it out and see that we've got an array in our message property that has seven different breed strings in it.

[00:04:32]
So suffice it to say, that so far we've been working with data that we either hard coded, we wrote it ourselves in our program. Or maybe we got it as the output of some built in function, like document.queryselector or something like that. But sometimes we need data from elsewhere, on the web, and we can do that by accessing these URLs that are API endpoints.

[00:04:58]
Cool, so [COUGH].
>> Could you do like a map or a filter from an array to filter it further or.
>> So, once we've got a resource from an API endpoint, once you've got a chunk of data, in this case, an object that looks like this. And we have this array in our message property, once we've got it into our program, we can do whatever we want with it.

[00:05:23]
We can work with it, we can assign it to a variable, we can work with the same way we've been working with our hard coded arrays. Or with our arrays that are returned from our built in functions and method. So, once it's in our JavaScript code, I should say once it's in our JavaScript program, once it's been dynamically pulled in by JavaScript, we can do whatever we want.

[00:05:45]
We can filter it, we can map it, we can push to it, we can pop from it, we can do whatever we want. If it's an array, we can push and pop from it. Sometimes it's an object, so we can drill down into, property.property.property.property. We can do whatever we want once we have it as an object in our running JavaScript program.

[00:06:09]
And that is exactly what we need to do. We need to tell JavaScript to go get some data and pull it into our program, so that we can work with it. And the way that we can do that is through a built in function, or it's often called an API itself.

[00:06:28]
API is one of these very confusingly, one of these terms that's used to mean a lot of different things. Or we say it's overloaded, the same way that our plus operator is used to do a lot of different things, it's overloaded, so is the term API [LAUGH]. But in this case, the Fetch API is also something you might hear.

[00:06:46]
But suffice it to say, let's say the fetch built in function, lets us load data from somewhere on the internet using JavaScript. And what we very commonly do with fetch is we load data from API's. We load data we care about, for example, all of the hounds, from an API endpoint.

[00:07:07]
We do this a lot as JavaScript developers, and not only API data, but other stuff we can get to. Like we could get a whole HTML page and work with it for example. But in this case we're gonna focus on pulling objects off of the interwebs.