Populating Table From JSON File using jQuery and Ajax Tutorial

Submitted by oretnom23 on Tuesday, October 12, 2021 - 17:03.

In this tutorial, we will tackle about how to Populate HTML Table from JSON File using jQuery and Ajax. This tutorial will teach to populate tables from JSON data using asynchronous HTTP (Ajax) requests. This technique can optimize your application page load by loading the data only when the page or document is ready. You can also refresh or reload the table row items without leaving the page.

We will be creating a simple HTML Web Application that has a simple user interface, a table for displaying data, and a button for refreshing data. Our goal on this simple application is to load the data using the Ajax Request from the JSON File which contains the data to be displayed/shown in the table.

Getting Started

Download the jQuery library. If you are downloading the compressed jQuery File, make sure that the library can able to do Ajax Request. For the user interface design, I will be using Bootstrap v5.

Creating the Interface

The script below is the HTML file for our index page of the web application. This contains the HTML Scripts for our sample web application. Save this file as index.html.

  1. 	<!DOCTYPE html>
  2. 	<html lang="en">
  3.  
  4. 	<head>
  5. 	    <meta charset="UTF-8">
  6. 	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. 	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. 	    <title>Populating HTML Table from JSON File (jQuery/Ajax)</title>
  9. 	    <link rel="stylesheet" href="./css/bootstrap.min.css">
  10. 	    <script src="./js/jquery-3.6.0.min.js"></script>
  11. 	    <script src="./js/bootstrap.min.js"></script>
  12. 	    <script src="./js/script.js"></script>
  13. 	    <!-- Custom CSS -->
  14. 	    <style>
  15.  
  16. 	    </style>
  17. 	</head>
  18.  
  19. 	<body class="bg-light">
  20. 	    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
  21. 	        <div class="container">
  22. 	            <a class="navbar-brand" href="https://Sourcecodester.com">
  23. 	            Sourcecodester
  24. 	            </a>
  25. 	        </div>
  26. 	    </nav>
  27. 	    <div class="container py-3" id="page-container">
  28. 	        <h3><b>Populating HTML Table from JSON File using jQuery and Ajax</b></h3>
  29. 	        <hr>
  30. 	        <div id="printables">
  31. 	            <div class="to_print" id="first_element">
  32. 	                <h3 class="text-center"><b>Sample Table List</b></h3>
  33. 	                <hr>
  34. 	                <table class="table table-bordered table-striped" id="table-list">
  35. 	                    <thead>
  36. 	                        <tr class="bg-primary bg-gradient text-white">
  37. 	                            <th class="text-capitalize text-center py-1 px-2">#</th>
  38. 	                            <th class="text-capitalize text-center py-1 px-2">name</th>
  39. 	                            <th class="text-capitalize text-center py-1 px-2">phone</th>
  40. 	                            <th class="text-capitalize text-center py-1 px-2">email</th>
  41. 	                            <th class="text-capitalize text-center py-1 px-2">region</th>
  42. 	                            <th class="text-capitalize text-center py-1 px-2">country</th>
  43. 	                        </tr>
  44. 	                    </thead>
  45. 	                    <tbody>
  46. 	                    </tbody>
  47. 	                </table>
  48. 	                <div id="loader" class="d-flex justify-content-center">
  49. 	                    <div class="spinner-border" role="status">
  50. 	                        <span class="visually-hidden">Loading...</span>
  51. 	                    </div>
  52. 	                </div>
  53. 	            </div>
  54. 	        </div>
  55. 	        <hr>
  56. 	        <center><button type="button" class="btn btn-sm btn-success rounded-0 my-2" id="reload_data">Reload Data</button></center>
  57. 	    </div>
  58. 	</body>
  59.  
  60. 	</html>

Creating the JSON File

This json data below is the dummy data that we will use for this tutorial. Save the file as data.json.

  1. 	[{
  2. 	        "name": "Lucius Gray",
  3. 	        "phone": "1-516-232-7113",
  4. 	        "email": "[email protected]",
  5. 	        "region": "Auvergne",
  6. 	        "country": "South Korea"
  7. 	    },
  8. 	    {
  9. 	        "name": "Hoyt Jimenez",
  10. 	        "phone": "(372) 384-7611",
  11. 	        "email": "[email protected]",
  12. 	        "region": "Mecklenburg-Vorpommern",
  13. 	        "country": "Sweden"
  14. 	    },
  15. 	    {
  16. 	        "name": "Herrod Myers",
  17. 	        "phone": "1-725-531-1736",
  18. 	        "email": "[email protected]",
  19. 	        "region": "Podlaskie",
  20. 	        "country": "Belgium"
  21. 	    },
  22. 	    {
  23. 	        "name": "Rigel Shepherd",
  24. 	        "phone": "(326) 231-7177",
  25. 	        "email": "[email protected]",
  26. 	        "region": "Stockholms län",
  27. 	        "country": "Australia"
  28. 	    },
  29. 	    {
  30. 	        "name": "Olympia Ramos",
  31. 	        "phone": "(231) 414-8657",
  32. 	        "email": "[email protected]",
  33. 	        "region": "Heredia",
  34. 	        "country": "Turkey"
  35. 	    }, {
  36. 	        "name": "Stephen Ross",
  37. 	        "phone": "(715) 558-1845",
  38. 	        "email": "[email protected]",
  39. 	        "region": "Western Australia",
  40. 	        "country": "Germany"
  41. 	    },
  42. 	    {
  43. 	        "name": "Quintessa Ramsey",
  44. 	        "phone": "1-871-898-6553",
  45. 	        "email": "[email protected]",
  46. 	        "region": "Bourgogne",
  47. 	        "country": "India"
  48. 	    },
  49. 	    {
  50. 	        "name": "Octavius Clements",
  51. 	        "phone": "1-686-216-3414",
  52. 	        "email": "[email protected]",
  53. 	        "region": "Vienna",
  54. 	        "country": "Belgium"
  55. 	    },
  56. 	    {
  57. 	        "name": "Nell Ellis",
  58. 	        "phone": "1-377-554-4665",
  59. 	        "email": "[email protected]",
  60. 	        "region": "South Australia",
  61. 	        "country": "Netherlands"
  62. 	    },
  63. 	    {
  64. 	        "name": "Ivana Ayers",
  65. 	        "phone": "1-181-283-6548",
  66. 	        "email": "[email protected]",
  67. 	        "region": "San José",
  68. 	        "country": "Ireland"
  69. 	    }
  70. 	]

Creating the Main Function

The code below is the javascript/jquery script for printing the elements. The function below is being executed when the page loads and reload button is triggered. Save this file as script.js and include the file in your index.html file.

  1. 	function load_data() {
  2. 	    // Show loader
  3. 	    $('#loader').removeClass('d-none')
  4. 	        // Selecting the table Element
  5. 	    var table = $('#table-list')
  6. 	        // Emptying the Table items
  7. 	    table.find('tbody').html('')
  8. 	    setTimeout(() => {
  9. 	        $.ajax({
  10. 	            // JSON FILE URL
  11. 	            url: 'data.json',
  12. 	            // Type of Return Data
  13. 	            dataType: 'json',
  14. 	            // Error Function
  15. 	            error: err => {
  16. 	                console.log(err)
  17. 	                alert("An error occured")
  18. 	                $('#loader').addClass('d-none')
  19. 	            },
  20. 	            // Succes Function
  21. 	            success: function(resp) {
  22. 	                if (resp.length > 0) {
  23. 	                    // If returned json data is not empty
  24. 	                    var i = 1;
  25. 	                    // looping the returned data
  26. 	                    Object.keys(resp).map(k => {
  27. 	                        // creating new table row element
  28. 	                        var tr = $('<tr>')
  29. 	                            // first column data
  30. 	                        tr.append('<td class="py-1 px-2 text-center">' + (i++) + '</td>')
  31. 	                            // second column data
  32. 	                        tr.append('<td class="py-1 px-2">' + resp[k].name + '</td>')
  33. 	                            // third column data
  34. 	                        tr.append('<td class="py-1 px-2">' + resp[k].phone + '</td>')
  35. 	                            // fourth column data
  36. 	                        tr.append('<td class="py-1 px-2">' + resp[k].email + '</td>')
  37. 	                            // fifth column data
  38. 	                        tr.append('<td class="py-1 px-2">' + resp[k].region + '</td>')
  39. 	                            // sixth column data
  40. 	                        tr.append('<td class="py-1 px-2">' + resp[k].country + '</td>')
  41.  
  42. 	                        // Append table row item to table body
  43. 	                        table.find('tbody').append(tr)
  44. 	                    })
  45. 	                } else {
  46. 	                    // If returned json data is empty
  47. 	                    var tr = $('<tr>')
  48. 	                    tr.append('<th class="py-1 px-2 text-center">No data to display</th>')
  49. 	                    table.find('tbody').append(tr)
  50. 	                }
  51. 	                $('#loader').addClass('d-none')
  52. 	            }
  53. 	        })
  54. 	    }, 500)
  55. 	}
  56.  
  57. 	$(function() {
  58. 	    // Hide loader on document ready
  59. 	    $('#loader').addClass('d-none')
  60. 	    setTimeout(() => {
  61. 	            load_data()
  62. 	        }, 200)
  63. 	        // Reload Button Function
  64. 	    $('#reload_data').click(function() {
  65. 	        // refreshing the table data
  66. 	        load_data()
  67. 	    })
  68. 	})

That's it! You can now test the source code you created on your end and see if it works as we planned. If there's an error occurred, kindly review the source code I provided above. Working source code is also provided in this article. Download Button is located below.

DEMO VIDEO

That ends this tutorial. I hope this tutorial will help you with what you are looking for and you'll find this useful for your future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Tags

Comments

Submitted bykeydi (not verified)on Wed, 06/29/2022 - 17:02

I sent you an email. Hope you can check on it. thank you

Add new comment

About text formats