How to Load Data Into Tables With the Fetch API in JavaScript

hey guys how you going my name is dom and today i'm going to be showing you how to populate your html tables using the fetch api okay so right here in this example this html table was empty when the page first loaded up so that means that there was no table headers or table rows so this is all loaded uh using fetch and it's done asynchronously okay so how do we achieve this it's actually very simple okay so going inside this tab right here we're going to be beginning from scratch or almost from scratch to create what i just showed you what i mean by almost from scratch is that i've actually included my own styling for the table already so i'm going to assume that you have your own tables or your own table styles as well so we're just going to be focusing on the javascript for this tutorial but just keep in mind that in order for this to work you're going to need to have a table like this inside your html with an empty table head and an empty table body so essentially the javascript is going to be populating these two elements with your rows okay so going inside this json file right here this is where of course my data is stored for for that table okay now i'm using a json file here but this can easily be some sort of api endpoint to your backend server or some other sort of endpoint so you're not limited to using a json file here this can be a regular endpoint done using php express python whatever you're using okay now but the actual structure of this json content is important okay so right here i've got a json as my root it's a json object with a key called headers and it's an array so this first array here is every single header for the table you know as strings okay the next property of this draxon object is of course rows so the rows property here is once again an array but this time it's an array of arrays so it's a multi-dimensional array and each item inside here represents a single row and they should be presented in the same order as your table header so of course the first element here matches to the first element here and then so on so of course user id id name occupation then age okay so as long as you have a structure like this in your response from your server or your json file itself just like this you should be good to go okay so going inside the javascript now let's write a function that is going to of course fetch that data and then populate it inside the table so this function is going to be asynchronous so we're going to say async function then call this function here load into table okay this function is going to take in two parameters the first one is going to be the url for the json file or your json endpoints the second one is going to be the table element itself so the reason for providing these two as arguments or parameters is because want to make this function reusable okay so you don't want to hard code your url and your table inside here because then the function is a bit useless um in other contexts so when i actually call this function right down here or whatever you want to call it okay so for example if i call the load into table function here i can pass through the the url so i can say that's going to be dot forward slash data.json in this case because of course my json file is located in the same directory as the html so of course that dot forward slash is going to work for that scenario and the second one here is going to be the actual table to populate so of course we're just going to say document.query then pass through here table so essentially just selecting the first table on the web page in my case it's of course this one right here so going back inside here the reason why this function is asynchronous is because we want to make use of the await keyword in javascript while we are using the fetch api okay so essentially it just allows us to you know pause the code or let the code run as if it was synchronous while using fetch okay so let's just get into it so the first one here is going to be or the first thing to do inside this function is going to be to create a new constant called table head it's going to be equal to table dot query selector then pass through here the table head element so basically now this table head simply refers to the t head inside the html and the same goes for the body so let's make a second one here called table body and make this go to t body okay cool next up we're gonna actually be calling the uh the fetch api to retrieve the json file so for this we're going to say const response is equal to then say await then pass through here fetch then the url so it's going to fetch the json url and by using the await keyword basically because as we know fetch is going to be asynchronous which means it can run you know while other things or you know if we if we didn't use the awake keyword here then the code below here would be running while the response is still coming back so by using the awaits keyword the code below here is not going to run until the response comes back from the server or whatever it is um you know for this file okay then once we've got the response back from the fetch api we can say const then using object destructuring here we're going to use curly braces now we're just going to say headers then comma rows so this will be equal to response dot json so once again the json method is going to be asynchronous which means if we place a weight here it's going to work in the exact same way as the previous line where it's going to wait until this operation is complete before moving on so what is this doing when the response comes back from the server sorry when the response comes back right it's an object containing information about what we just retrieved so things like http status codes headers but also the data itself so the whole json content okay then in the response object we're basically saying let's treat the the data that came back as json and this is going to convert the json string right here into a native javascript object okay so it's probably going to be easier if i actually remove you know this this section here and i just say data okay let's just do let's just go with that for now and i'll say console.log and then pass through here data if i save this go inside the browser as we can see we've got here in the response we've got the object that has come back from the json file okay so essentially that json here has converted our string into a native javascript object okay next up going back to my previous code with the curly braces if i say headers then rows essentially what it's doing is it's it's called object destructuring in javascript okay so basically we're simply grabbing the headers property from our object which we just saw and putting it inside this constant the same goes for the rows okay if this key here or this property was not headers exactly this code wouldn't work this headers and this roads need to match up with these two here okay so we've got our headers and the rows okay next up we need to clear the table as it currently is so we're going to say clear the table this basically just means let's remove all of the existing content from the table when the page first loads up of course you're going to have no content inside of there so essentially that means that this code will be useless for your first call but if you were to call this this function again on the same table if for example you are refreshing the data then this line here is definitely going to help you out so we're going to say table head oops table head dot inner html is equal to just simply an empty table row so of course we're going to be placing our headers inside these sorry inside this element okay next up the exact same thing for the table body this one those can of course be empty because we need to populate those rows using the the rows property or the rows constant right here okay cool next up we can populate the headers okay so for this one here we're going to simply loop through every single header so we're going to say 4 of 4 const header text of then pass through here headers so for every single header inside that array we're going to create a new header element so we're going to say const header element is equal to document dot create element here then pass through t8 to create a new th element inside the javascript okay next up let's set the text content of that element we'll say header element dot text content is equal to then pass through here the header text just like that okay and lastly we can simply append this th to our table row um from up so from up above okay so for this we can just say table head dot query selector we're going to be selecting that tr element right there and we'll say dot append child then pass through here the header element just like that if i save this go back inside the browser we can see we've got the header contents being populated inside the table and of course one of the main benefits of this solution is that you can go inside your json file and you can you can add a property here you can you can add for example something like city right save this and go back and city is right there so you're not limited by your front-end javascript code as to how many columns or how many rows you can have you know as part of your table data okay cool so going back inside here we can now focus on populating the rows okay so for the rows it's going to work in a very similar fashion we're going to be looping through once again so i'll say four const row of rows here so for every single row inside the response rows remember this rows here is an array of arrays okay so looping through the first array here um we're going to be creating a new row element just like this one up here in fact i'll just copy this and go right down here and i'll say const row elements equal to then say tr right inside here okay now for every single um you know every single cell of information here so this one this one and this one and this one we can loop again so we'll say for for of const cell text of row for every single cell inside that row we can create a new cell element so once again copy this line and paste it right down here and we'll say cell element okay equal to this time and we'll say you know td instead of the tr okay so we're creating a new td for every single cell text now right down here we can say cell elements dot text content and we're going to be setting that content so we'll just say it's going to be equal to cell text right there to inject our cell text and next up we can simply append the td to our tr so we'll say row elements dot append child then pass through here the cell element just like that okay then the last step outside of our loop here is going to be to append the row to the table itself so we'll say table body dot append child then pass through here the row element just like that okay remember the table body is referring to the t body in the html so if i save this now go back inside the browser we have our fully loaded up table right there okay so that is how to create or that is how to populate your html tables using the fetch api remember guys like i said earlier you can easily you know call this function as many times as you want you can add your own little refresh icon if you want or you can update the data every one minute or whatever you want to do you can do so using this function so if today's video helped you out drop a like and subscribe thanks for watching guys and i'll see you in the next video

Channel: dcode

Views: 5,910

Rating: 4.9845562 out of 5

Keywords: html tables tutorial, html5 table tutorial, javascript fetch api tutorial, javascript http request tutorial, ajax into table javascript tutorial, asynchronous table load with javascript, how to call fetch api in javascript, fetch api get request into table in javascript, refresh http table in javascript

Id: qBg8IB3u28s

Length: 14min 27sec (867 seconds)

Published: Mon Aug 16 2021