Introduction to Web APIs: Fetch API. On the screen, I have a requestUrl variable and this represents a server-side API URL from which I would like to request some data. I'm gonna begin by typing fetch, parentheses, passing through an argument of requestUrl. Fetch API is a promise-based API, meaning I need to use the .then statement to handle the promise object. .then, parentheses, and the way the promise object is handled is by passing it through a parameter. And this is a function that will handle the promise object. And I will give this function a parameter of response, and this will be a arrow function. So arrow, curly brackets, and I'm gonna return response.json, parentheses.

So pausing for a moment, when interacting with server-side APIs and making a fetch request, usually the data is gonna come back in JSON format. So I need to use this built-in .json method to parse the response into something usable. As part of this process, the first .then statement returns an additional promise. So I need to use another .then statement to resolve this promise object. And the function parameter is data. Using an arrow, I'm gonna console.log the data. I'm gonna execute the fetch request, and to the right, there is a singular object.

So what does this mean? Well, the Fetch API is a way of fetching resources, typically data. When working with server-side APIs, either through the use of the API's documentation or your own experimentation, you need to create a form of analysis to determine how to consume this data for your web application. Here I have a singular object. It has four properties and if I wish to access the title, I would have to access that property value. So I'm gonna change the console.log from data to data.title. And I will execute the fetch request again and to the right, it's just a title from the response.

Now, this is just a singular object of data. What if I had to work with a larger set of data? I'm gonna change data.title back to data and change the requestUrl. I'm gonna execute the fetch request again and now there is this array of user objects. Each user has a lot of information, including that ID that represents the sequential order of that specific user, and the email address. How would I console.log this user's email address? I'm gonna change the console.log from data to data at the index of two. Remember, arrays are zero index. And because the email address is a property, to access that value, I'm gonna attach .email and I will execute the fetch request again and there's this user's email address.

Now, taking this a step further, what if I wanted to grab all the user email addresses and store it into an array from this data? I'm gonna use a higher-order function in combination with this fetch request to create a new array with every email address. I'm gonna replace the console.log with const emails and set it equal to data.map, and higher-ordered functions take a function as a argument. So I'm gonna pass through element as a parameter for an arrow function. And then I'm gonna return element.email. When this fetch request is executed, the JSON response will be iterated through using map, and every email address from each element of the array will be put into a new array called emails.

Now, after this higher-order function, I'm gonna console.log emails. I will execute the fetch request and to the right, there's an array of all the email addresses from the JSON response. And that's it. Thanks for watching at Cloud Academy.