• Wednesday , 1 April 2020

Loading data into HTML Tables using AJAX – JavaScript Tutorial

Code Canyon



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:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Support me on Patreon:
https://www.patreon.com/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!

Original source

3d Ocean

Related Posts

27 Comments

  1. Tom Luther
    February 17, 2020 at 17:49

    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?

  2. D Rocks Records
    February 17, 2020 at 17:49

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

  3. Abhishek Sharma
    February 17, 2020 at 17:49

    share source pls

  4. Rofi Areiv
    February 17, 2020 at 17:49

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

  5. Paulo Ramos
    February 17, 2020 at 17:49

    Thanks for the tutorial.
    To remove all table rows I used $("#statsTable tbody tr").remove();

  6. Andrew McWilliam
    February 17, 2020 at 17:49

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

  7. Ramzi Aswad
    February 17, 2020 at 17:49

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

  8. B
    February 17, 2020 at 17:49

    Super helpful

  9. Avinash Joshi
    February 17, 2020 at 17:49

    Thanks. It's awesome

  10. Amrita Bakshi
    February 17, 2020 at 17:49

    Awesome!

  11. brain funmax
    February 17, 2020 at 17:49

    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:

    <script type="text/javascript">

    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(); });

    </script>

  12. SOTG 4L
    February 17, 2020 at 17:49

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

  13. Dev Mc Gann
    February 17, 2020 at 17:49

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

  14. Malek Hammou
    February 17, 2020 at 17:49

    Thank you for this great content.

  15. Atharv Kulkarni
    February 17, 2020 at 17:49

    Keep up the good work man!

  16. Tomáš Mišura
    February 17, 2020 at 17:49

    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 🙂

  17. Floris Bastiaan
    February 17, 2020 at 17:49

    could you leave the source code in the discription?

  18. Lyndon Banate
    February 17, 2020 at 17:49

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

  19. Joel Lopez
    February 17, 2020 at 17:49

    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?

  20. Mister K
    February 17, 2020 at 17:49

    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!

  21. Isaac Rodríguez Iriarte
    February 17, 2020 at 17:49

    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

  22. Shawn Carpenter
    February 17, 2020 at 17:49

    Awesome tutorial! Been looking for this thanks for posting.

  23. salman ali
    February 17, 2020 at 17:49

    Excellent video mate. Keep up the good work!

  24. Jose Romero
    February 17, 2020 at 17:49

    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…

  25. Wes Andrade
    February 17, 2020 at 17:49

    You are an excellent instructor. Lifesaver. Thank you.

  26. codecaine
    February 17, 2020 at 17:49

    Keep up the excellent work!

  27. Fransisco Wijaya
    February 17, 2020 at 17:49

    11:00 instead of renaming, you can simply put:

    throw new Error("message");

Leave A Comment

You must be logged in to post a comment.