How to Load Data Into HTML Tables With The Fetch API in JavaScript

In today's video I'll be showing you how to load data into an HTML table using the Fetch API/requests in JavaScript. This is a fully re-usable, asynchronous solution that's easy to implement.

For your reference, check this out:

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript

[abellara]

Amazing content 👍 very well explained.

Quick question: how would you loop or paginate an API with massive data, multiple pages?

Cheers.

[ukm]

This is the best Fetch API video tutorial. Learning this is a great first step into any beginners first big boy CRUD project

[scottisitt]

This was awesome! Liked and subscribed.

[nilamrakholiya]

I am appreciate your time for making this video. Thank you so much for all the information you provided.

[carterpierre]

This was great! Thank you so much for creating this! For the header what if you only needed specific headers and not all of them?

[umbertopolanco]

I want to create the JSON file with code and keep adding arrays of columns as different users save data. How would you go about it? The data I'm collecting and passing to the array will come from form elements.

[SaintHanappi]

Thank you sir.
Watching your excellent (little) tutorials since a few days. Sub on

[risitakumar]

In the end you mentioned that using the loadintoTable function we could create a refresh button on clicking which the table gets refreshed, how do I do that ?

[umbertopolanco]

If I want to fectch the localStorage data to a table, would this be the same approach?

[samvelpetrosyan]

and what about if you have 2 api info and u have to put them in one table, how to do that ?

[VaughnMelson]

FYI udemy course link is broken and not sure how to search by instructor on their website

[anaszh]

hello how can we add button inside this table

[ncielkrommalzeme]

it gives an error and can not ge data from data.json file why? is my fault?

[sanchitsharma]

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')
Its showing this error even I tried put the script tag below table tag but not working.

[samvelpetrosyan]

hey nice toutotial, can u share the codes?

[ahmetgilik]

hello dom, what is your font family of the vs code? it is very cool

[jakubp]

big minus that you dont add github repo with the code

[joe]

You always give valuable content <3 your video is amazing

I tried this method and its works well, but in some cases, I got this

*Mixed Content: was loaded over HTTPS, but requested an insecure resource*

my JSON is hosted on a website that has HTTP only no SSL, is there any solution? and thank you

[rawstrife]

How would I initially get my data in that format? Lets say my data is an array of objects [ {ID:X, name: X, Age: X}, {ID:X, name: X, Age: X} ] . Can someone tell me how to format this into that?

[sanketgawande]

Thank you so much sir .
I tried same with different method . Making string with td elements and actual data from json and added it as inner HTML of table head and body .
Love dcode theme #009875