Loading data into HTML Tables using AJAX - JavaScript Tutorial
HTML-код
- Опубликовано: 6 июл 2024
- 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:
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
Support me on Patreon:
/ dcode
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
As a rank amateur watching and listening to you, I find that you make perfect sense and are easy to follow. Great vid!
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. :)
You are an excellent instructor. Lifesaver. Thank you.
No problem mate, thanks!
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
No probs mate
Awesome tutorial! Been looking for this thanks for posting.
No problem! Glad you enjoyed it
Your a legend mate. Short, sweet, easy to understand and very useful. You should get a patreon mate.
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!
will do mate, gw
Excellent - Thank you. It;s a must watch video on the subject.
Excellent video mate. Keep up the good work!
Thankyou mate!
Thank you so much for this man !! a big hug as usual amazing content!!
Excellent tutorial, thanks DOM 😃
Im literally mind blown by the way you explain! it's reaaallyyyyy cool man. Please keep it up. Love you man!
Appreciate that!! Thanks for watching
Nice tutorial, I'm applying server side ajax request using this, thanks :)
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 :)
Awesome mate!
Keep up the good work man!
Nice tutorial thanks a lot, it was one of my actual question and you answered it well
Thank you for this great content.
Thank you. Great video. :)
Realmente bueno!! Muchas gracias!!
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?
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.
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?
how to create dynamic forms whose data comes from json like this, which I use for the data edit form. please help me.
Beautifully explained. Thank you very much.
{2021-06-28}
thanks .. you got one new subscriber :)
Welcome, mate
wow, thank you so much
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
Super helpful
Glad it helped!
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
Check the variable name you have declared, could be that?
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...
What do you mean by selectable? As in you can click them?
@@dcode-software hi, i mean adding a checkbox to select a specific row from the table. Is that doable with your example? Thank you!!
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
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?
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
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!
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
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.
Awesome!
Yeah goes alright!
Great video!! Im learning JS and this is pure gold to me.
Aside note: Is not easier now with the template literals?
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
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
The guy is actually called DOM
Exactly right mate
have you got a tutorial for a blob upload in a database with ajax?
Can you tell us please how can we load the data from database (sql)
yea for me it worked with rows but not cells
What about adding edit and delete to the table row
I'm using web server for chrome and keep getting "could not load rankings" in the console. Any ideas?
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.
how do I fetch with post request and use the data on the other side
thank you for the content. maybe you could use bigger font to be friendly for mobile screens
Hey mate! No worries - and thanks for that piece of advice I'll definitely keep it in mind
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
BTW, I looked on the links provided and nothing there...
can we get the json from a servlet?
How to add a button for each row, coz i want a delete, update, submit for each row?
curious, why not use fetch instead of xmlhttprequest?
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 😁
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.
Thanks for the support! 😁 - and yes I'll likely create a few videos to cover the Fecth API
how to fetch google sheet data in website?
How do we pass html content in ajax
Ok, now how do you do this with objects?
Thanks
No probs mate!
Thanks for very useful video, My console.log is not working , when I am trying to retrieve json from url
What's happening?
@@dcode-software its just saying undefined ! If its possible I can email you that I have done
Just post the full error or post the code somewhere and I can point you in the right direction
@@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
I am having trouble in enabling my CORS how can I resolve this? Please help
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
@@dcode-software Thanks! I got the solution.
@@lyndonbanate2228 how you solve this problem i am suffering from same problem?
could you leave the source code in the discription?
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
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(); });
Do console.log(e) instead of the "Could not load rankings!" And see what the error is
@@dcode-software I found syntax error in my json file, it works now, thank you so much
where is source code
Ahh.. my eyes hurt. what is that light? Oh, this white theme in the vs code should be banned...