Loading data into HTML Tables using AJAX - JavaScript Tutorial

In most medium-to-large sized websites or applications, it's ideal to separate your data from your HTML markup. One way to achieve this is by creating a structure in HTML and then loading the data separately from a dedicated data-file.

AJAX is a method of loading data into a web page once it has finished loading - using JavaScript.

In this video I take you through an example of where we populate a HTML table with rows and cell data that comes from an external JSON file. We go through the steps of making the HTTP request, parsing the content and then manipulating the DOM to finally render the data to the user.

For your reference, check this out:

Support me on Patreon:

Follow me on Twitter @dcode!

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 #css

[andrewmcwilliam]

As a rank amateur watching and listening to you, I find that you make perfect sense and are easy to follow. Great vid!

[brightm.chongo]

This is purely genius Dom. Exactly what I was looking for in my Remote Server Monitoring System project. Well explained and extremely helpful. Being a newbie to web development, I wish I could be your student. :)

[gabob]

Thank you so much for this man !! a big hug as usual amazing content!!

[cloudpuncher]

Your a legend mate. Short, sweet, easy to understand and very useful. You should get a patreon mate.

[wandrade]

You are an excellent instructor. Lifesaver. Thank you.

[captainalpha]

Im literally mind blown by the way you explain! it's cool man. Please keep it up. Love you man!

[lesbristow]

Great vid - cover exactly the task I have in hand - and without using any terms I was not familiar with.
Clear explanation of all the steps - Thanks

[TomasMisura]

thanks a lot for this video. regardless I have been using AJAX for a long time I have found something what I didn't know and learned a little bit more :)

[salmanali-yntw]

Excellent video mate. Keep up the good work!

[victor_yahoo]

Excellent - Thank you. It;s a must watch video on the subject.

[shawncarpenter]

Awesome tutorial! Been looking for this thanks for posting.

[kolecava]

How can I populate a a table with a JSON output like this?

[
{
"rank": 1,
"team": "Steeltab",
"country": "Kyrgyzstan",
"player": {
"one": "Laurie",
"two": "Rowland"
},
"points": 2019
}
]

Extremely good and clear tutorial btw!

[HisyamKazim]

Nice tutorial, I'm applying server side ajax request using this, thanks :)

[jamesserenity]

At 13:00 the console.log(cell) won't print for me? Any ideas, it's coming from a server fetched from a database. It worked for the rows

[Pareshbpatel]

Beautifully explained. Thank you very much.

{2021-06-28}

[PraveenKishor]

thanks .. you got one new subscriber :)

[purplefan]

Awesome video. One comes across such videos very very rarely. Highly recommended for everyone trying to understand such concepts. I have one request: Could you suggest how to handle thousands separator for numbers, please? Option of converting to strings and then inserting separator using RegEx seems too roundabout.

[DRocksRecords]

Nice tutorial thanks a lot, it was one of my actual question and you answered it well

[gamblerau]

Thanks for that. What if I had a constantly changing json file. How could I update the table every minute for example without reloading the page?

[isaacrodrigueziriarte]

It looks cool! But, I have a little problem: Getting the data from a PHP file using the json_encode method, the resulting JSON it's very different from the one you created, because is made of arrays and the json are made of objects. Could you make a video teaching how to do it in that case? I will appreciate it a lot
Thanks for this video