Loading data into HTML Tables using AJAX - JavaScript Tutorial

[@andrewmcwilliam1764]

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

[@cloudpuncher4615]

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

[@dcode-software]

Hey Steve! Thanks for your continuous support mate, it means a lot 😁 - and yes I did recently create a Patreon page which you can find in the description if you'd like to check it out!

[@cloudpuncher4615]

will do mate, gw

[@brightm.chongo9192]

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. :)

[@wandrade07]

You are an excellent instructor. Lifesaver. Thank you.

[@dcode-software]

No problem mate, thanks!

[@gabo182b]

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

[@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!

[@dcode-software]

Thank you, and it's hard to say.. I think you'll need to decide how you'd want to do that on your own

[@lesbristow5657]

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

[@dcode-software]

No probs mate

[@jamesserenity8634]

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

[@jacobhobday111]

Check the variable name you have declared, could be that?

[@captainalpha4853]

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

[@dcode-software]

Appreciate that!! Thanks for watching

[@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 :)

[@dcode-software]

Awesome mate!

[@shawncarpenter5024]

Awesome tutorial! Been looking for this thanks for posting.

[@dcode-software]

No problem! Glad you enjoyed it

[@nasarnasar9876]

Excellent tutorial, thanks DOM 😃

[@vimalchawla6740]

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

[@salmanali-yn3tw]

Excellent video mate. Keep up the good work!

[@dcode-software]

Thankyou mate!

[@isaacrodrigueziriarte3442]

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

[@HisyamKazim]

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

[@purplefan204]

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.

[@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?

[@safe730]

Thank you for this tutorial. I load a table with more line that the page becomes scrollable. the problem is that the head scrolls all along with the data. my issue is how to get the header sticky ? than you again.

[@LORD_ORiGiNALz]

Hey I'm wondering if you could answer my questions 1. Connecting to the server endpoints (Explain how to make a connection (Ajax), build URL etc.) 2. Accessing the data (Show the structure of the data returned and explain how to access.) Would you be able to explain these in simple English as I'm still new to this whole thing

[@ramziaswad3079]

Can you tell us please how can we load the data from database (sql)

[@jamesserenity8634]

yea for me it worked with rows but not cells

[@kunited9]

The guy is actually called DOM

[@dcode-software]

Exactly right mate

[@ifeanyinnaemego]

What about adding edit and delete to the table row

[@tudorhulban2817]

thank you for the content. maybe you could use bigger font to be friendly for mobile screens

[@dcode-software]

Hey mate! No worries - and thanks for that piece of advice I'll definitely keep it in mind

[@roficakep]

how to create dynamic forms whose data comes from json like this, which I use for the data edit form. please help me.

[@10F2C]

how do I fetch with post request and use the data on the other side

[@Pareshbpatel]

Beautifully explained. Thank you very much. {2021-06-28}

[@abhilashk]

wow, thank you so much

[@luther6969]

Thank you for this. Got it to work but I want to locate it in an external JS file. When I do this I get the "could not get rankings" error. Any idea why this is?

[@atharvkulkarni2548]

Keep up the good work man!

[@pbarb726]

I'm using web server for chrome and keep getting "could not load rankings" in the console. Any ideas?

[@adityaiyengar152]

Hopefully I'm not too late, but I had the issue, and resolved it (ok well I cheated) by switching over to using code sand box instead of visual studio or some other such ide.

[@prabhatjena5833]

can you make a video on putting a select box inside a table and populating data including every data comes from json mean table header data and table body data

[@mr.RAND5584]

How to add a button for each row, coz i want a delete, update, submit for each row?

[@DRocksRecords]

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

[@poornas]

Thank you. Great video. :)

[@inayatnadaf9143]

How do we pass html content in ajax

[@PraveenKishor123]

thanks .. you got one new subscriber :)

[@dcode-software]

Welcome, mate

[@user-yy6or3fz6o]

Super helpful

[@dcode-software]

Glad it helped!

[@malekhammou7572]

Thank you for this great content.

[@mariacristinaulloagarrido1224]

Realmente bueno!! Muchas gracias!!

[@am-kl2lg]

have you got a tutorial for a blob upload in a database with ajax?

[@MsJOEL29]

Hi very good tutorial I been wanting to do something like that before but I could't, I can do it now but if I add more data to each array it won't run, like more than 3 columns. Does the array have to be the same? Can they contain empty cells or null values?

[@dcode-software]

I'd probably use "null" as a placeholder that way you can just skip over that cell and still keep the same amount of items in the array

[@kannadahollywood]

Hi bro Please add a video loading CSV file into html and later search required data in html. Please bro please make a video for this

[@devgabriel6898]

Great video!! Im learning JS and this is pure gold to me. Aside note: Is not easier now with the template literals?

[@dcode-software]

No worries mate! And I guess that depends on personal preference or just what works better in your situation. The performance difference would be minimial

[@sumgowda6386]

can we get the json from a servlet?

[@florisbastiaan1113]

could you leave the source code in the discription?

[@Mrcherrypicked]

Hi, great video, but I'm a newbie and would like to see the source code so I can understand it clearly. Do you have the HTML with the javascript content available to subscribers? Thanks

[@Mrcherrypicked]

BTW, I looked on the links provided and nothing there...

[@AmritaBakshi]

Awesome!

[@dcode-software]

Yeah goes alright!

[@themaughan3378]

Ok, now how do you do this with objects?

[@rickyu1978]

curious, why not use fetch instead of xmlhttprequest?

[@dcode-software]

Hey, more people are familiar with XHR and it's widely supported - however the Fetch API is definitely on my list of topics to cover 😁

[@rickyu1978]

you're up their with netninja and some the best on youtube. keep them coming, solving real world problems...great audio quality and no nonsense intro. as a newbie js developer (less than a year) i learned fetch and axios rather than xhr which i believe was used to parse xml vs json files.. anyhow keep it up.. it would be cool if you do a series.

[@dcode-software]

Thanks for the support! 😁 - and yes I'll likely create a few videos to cover the Fecth API

[@javierromero7976]

Great video! How do you make the table rows you created with JSON data selectable? I noticed there aren't any good videos out there showing how to do that...

[@dcode-software]

What do you mean by selectable? As in you can click them?

[@javierromero7976]

@@dcode-software hi, i mean adding a checkbox to select a specific row from the table. Is that doable with your example? Thank you!!

[@brainfunmax2845]

I follow along but fail at 8:34 with the following error message: Could not load rankings! request.onload @ index.html:61 load (async) loadRankings @ index.html:56 (anonymous) @ index.html:71 what is this problem about and how to solve it? Here is the code: const rankingsBody = document.querySelector("#ranking-table > tbody"); function loadRankings () { const request = new XMLHttpRequest(); request.open("get","data/rankings.json"); request.onload = () => { try { const json = JSON.parse(request.responseText); populateRankings(json); } catch (e) { console.warn("Could not load rankings!"); } }; request.send(); } function populateRankings (json) { console.log(json); } document.addEventListener("DOMContentLoaded", () => {loadRankings(); });

[@dcode-software]

Do console.log(e) instead of the "Could not load rankings!" And see what the error is

[@brainfunmax2845]

@@dcode-software I found syntax error in my json file, it works now, thank you so much

[@ImranKhan-nb3jy]

Thanks for very useful video, My console.log is not working , when I am trying to retrieve json from url

[@dcode-software]

What's happening?

[@ImranKhan-nb3jy]

@@dcode-software its just saying undefined ! If its possible I can email you that I have done

[@dcode-software]

Just post the full error or post the code somewhere and I can point you in the right direction

[@ImranKhan-nb3jy]

@@dcode-software function loadWeathe(){ const request = new XMLHttpRequest(); request.open("get", "Access-Control-Allow-Origin: 127.0.0.1:8000/api/weather", true); request.onload = function(){ const json = JSON.parse(request.responseText); console.log(json); }; request.send(); }; its giving output : undefined

[@nehneh5488]

Thanks

[@dcode-software]

No probs mate!

[@lyndonbanate2228]

I am having trouble in enabling my CORS how can I resolve this? Please help

[@dcode-software]

On the server, you'll need to change the response header "Access-Control-Allow-Origin" to "*" - but this is a work around, basically means your server can accept requests from any client

[@lyndonbanate2228]

@@dcode-software Thanks! I got the solution.

[@ujjwalaggarwal2633]

@@lyndonbanate2228 how you solve this problem i am suffering from same problem?

[@sarthakkapoor4003]

where is source code

[@ricky52219]

Ahh.. my eyes hurt. what is that light? Oh, this white theme in the vs code should be banned...

[@tazulislam2698]

how to fetch google sheet data in website?