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. :)
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!
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 :)
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.
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?
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
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.
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(); });
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
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
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!
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.
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?
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.
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...
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
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
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
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
As a rank amateur watching and listening to you, I find that you make perfect sense and are easy to follow. Great vid!
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?
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. :)
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
You are an excellent instructor. Lifesaver. Thank you.
No problem mate, thanks!
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
Thank you so much for this man !! a big hug as usual amazing content!!
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
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!
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?
Excellent video mate. Keep up the good work!
Thankyou mate!
Excellent tutorial, thanks DOM 😃
how do I fetch with post request and use the data on the other side
Awesome tutorial! Been looking for this thanks for posting.
No problem! Glad you enjoyed it
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.
What about adding edit and delete to the table row
Can you tell us please how can we load the data from database (sql)
yea for me it worked with rows but not cells
how to create dynamic forms whose data comes from json like this, which I use for the data edit form. please help me.
Excellent - Thank you. It;s a must watch video on the subject.
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?
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
How to add a button for each row, coz i want a delete, update, submit for each row?
Nice tutorial, I'm applying server side ajax request using this, thanks :)
have you got a tutorial for a blob upload in a database with ajax?
can we get the json from a servlet?
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.
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
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
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
how to fetch google sheet data in website?
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
Keep up the good work man!
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.
Beautifully explained. Thank you very much.
{2021-06-28}
Ok, now how do you do this with objects?
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
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
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!!
Nice tutorial thanks a lot, it was one of my actual question and you answered it well
Thank you. Great video. :)
thanks .. you got one new subscriber :)
Welcome, mate
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
Realmente bueno!! Muchas gracias!!
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
Super helpful
Glad it helped!
wow, thank you so much
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...
Thank you for this great content.
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
The guy is actually called DOM
Exactly right mate
Awesome!
Yeah goes alright!
could you leave the source code in the discription?
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?
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
Thanks
No probs mate!
where is source code
Ahh.. my eyes hurt. what is that light? Oh, this white theme in the vs code should be banned...
How do we pass html content in ajax