GET Data from API & Display in HTML with JavaScript Fetch API

hey everyone in this video we will get some data from an external API and display it on the page with JavaScript okay so on the left side I have my HTML and we're going to write the JavaScript in script tags here on the right side I have opened up the project in the browser and I have opened the console right you can right click inspect you'll get the element but we'll use console here for JavaScript so we want to get some data from an external API right so we're using a surface here which will give us some fake data right so this is the Json data that we're going to fetch and then we want to Output it here right so for now we have an empty list so what we want to do is that for every user we create an Li right with their name or their email let's say I don't know what they have okay so we'll use email so let's actually try doing that so we can use fetch this is built in in the browser and we only have to give the address so I'm gonna copy this I'm gonna paste the URL here and let me actually show you this in full now fetch is promise based so we actually get a promise here you can consume a promise in two ways you can tag on dot then or these days you can also write a wait in front of it I have a whole video on Fetch and definitely check it out after this one we'll use the traditional syntax here and then usually people format it like this this will actually already send a request eventually we get a response and we get access to the response in here we can call that response or just res so let's actually see what we got here I'm gonna log this I have live servers so if I save here it will immediately run this code okay so here let's see let me actually make this a little bit bigger for you so here we see a response object and you know we're not really interested in everything here what we're really interested in is the body here this will actually be the data that we want but it is something with stream and this is because initially what we get here with response is only some headers some metadata right so you can imagine there could be a lot of data so we don't get all of the data immediately right we have to wait some additional time before all the data has been streamed in you could say right so what we're going to use here is rest.json so with this method we will wait until everything has been streamed in and then immediately parse the data as Json because the data will come in the format of Json and we want to convert that from Json into normal JavaScript right and we will return this so this one actually also give us a promise and we are returning the promise here so we can tack on another dot then we can chain these dot dance and whenever the value is with which This Promise gets fulfilled is what we get here and that will be the actual data in normal JavaScript format right so let's see what we get here Gonna Save and because of live server it will automatically make that Network request okay so now we get the actual data in normal JavaScript right so now we can work with this in here now we haven't done anything with error handling but typically you also see something with with a catch right now again I have a whole video on this so we're not going to make this very sophisticated you can watch the other video for that right but now we have the data in here we can create this list right so we can take their name perhaps or their email right let's actually do their names right so let's say here in the UL we want to create an Li for each of these users so we have data and we can see it's an array of objects right so we have data this is an array on an array you can say for each right so it will go over each element in the array each element here is an object representing a user right so I can call that user right and what I want to do with this user is well we want to create an Li put their name in the Li and then insert that here in the HTML right so we can create the the HTML markup for each user and so I can say markup and it's nice to use template literals for this so we can say Li and then in here we want to have the username and with template literals we can use the dollar sign and then write it like this right so we're going to get user dot name right so it's going to go over right so this is the array it's going to go over each each element in the array so first it's going to take the first one right Lian it's going to put this object of that user gonna assign that to user here and then in here we're going to create a variable markup with you with that user's name in the allies right so then for that particular user we want to insert that here in the HTML right so I have to select the UL because that's the element that we want to insert it in all right I'm just going to select by tag I could give it an ID or class but there's only one UL on the page right so I can select it like this I could create a separate variable for it but uh it's not really necessary here so then in here we can say well let me actually make a full screen insert adjacent HTML so we can insert this markup at the end of the UL or right before the end so we can say before end and then simply mark up right so what this will do is will it will take the markup for this particular user and then it's going to insert it in here right before the end right so right here basically that should show the usernames right and once it's done that for that particular user right for this one for Leanne it's gonna go what is four it's a for each Loop right so then it's going to assign the second element to User it's gonna run the same statements for that user as well right and then it's going to do it for Clementine as well right so it's going to go over each one in the array so now if I save here we should see the names here right so I'm Gonna Save and indeed we see other names right so this was a quick example of how to get data from an external API and render it on the page with JavaScript

Channel: ByteGrad

Views: 140,360

Keywords: javascript fetch, js fetch api, fetch api json, fetch data, get data, js get data, js fetch get, fetch get request, fetch http get, fetch data and display, javascript fetch api, render data, get data and render, fetch data and render, fetch data and render on page, fetch api crash course, insert data in html, fetch data dom manipulation

Id: zUcc4vW-jsI

Length: 5min 50sec (350 seconds)

Published: Mon Jul 11 2022