Let's create a table using JSON and JavaScript

Creating tables in pure HTML can be annoying at times. Instead, let's use JavaScript and JSON to create table rows!

Step 1 - Create JSON

[
 {"id": 1, "firstName": "John", "lastName": "Doe" },
 { "id": 2, "firstName": "Jane", "lastName": "Doe" },
 { "id": 3, "firstName": "Bill", "lastName": "Doe" }, 
 { "id": 4, "firstName": "Abraham", "lastName": "Lincoln" },
 { "id": 5, "firstName": "Bill", "lastName": "Gates" }, 
 { "id": 6, "firstName": "Steve", "lastName": "Jobs" },
 { "id": 7, "firstName": "Bill", "lastName": "Clinton" },
 { "id": 8, "firstName": "Joe", "lastName": "Biden" },
 { "id": 9, "firstName": "Kamala", "lastName": "Harris" },
 { "id": 10, "firstName": "Queen", "lastName": "Elizabeth" },
 { "id": 11, "firstName": "Bob", "lastName": "Doe" }
]

Step 2 - Insert it in JS

var data = [
 {"id": 1, "firstName": "John", "lastName": "Doe" },
 { "id": 2, "firstName": "Jane", "lastName": "Doe" },
 { "id": 3, "firstName": "Bill", "lastName": "Doe" }, 
 { "id": 4, "firstName": "Abraham", "lastName": "Lincoln" },
 { "id": 5, "firstName": "Bill", "lastName": "Gates" }, 
 { "id": 6, "firstName": "Steve", "lastName": "Jobs" },
 { "id": 7, "firstName": "Bill", "lastName": "Clinton" },
 { "id": 8, "firstName": "Joe", "lastName": "Biden" },
 { "id": 9, "firstName": "Kamala", "lastName": "Harris" },
 { "id": 10, "firstName": "Queen", "lastName": "Elizabeth" },
 { "id": 11, "firstName": "Bob", "lastName": "Doe" }
];

Step 3 - Create a HTML file

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Tables in HTML</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.0.0/dist/css/materialize.min.css">
    <!--Just for styles-->
  </head>
  <body>
    <div class="container"><br>
      <h3>
        Users in database
      </h3>
      <br>
      <table>
        <thead>
          <tr>
            <td>
              <b>First name</b>
            </td>
            <td>
              <b>Last Name</b>
            </td>
          </tr>
        </thead>
        <tr id="root"></tr>
      </table>
    </div>
    <br>
  </body>
</html>

Step 4 - The fun part.

Here we're going to use forEach and insertAdjacentHTML to create a row for every object in data

var root = document.getElementById('root');
data.forEach(element => root.insertAdjacentHTML('beforebegin', `<tr><td>${element.firstName}</td><td>${element.lastName}</td></tr>`));

Final code

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Tables in HTML</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@1.0.0/dist/css/materialize.min.css">
    <!--Just for styles-->
  </head>
  <body>
    <div class="container"><br>
      <h3>
        Users in database
      </h3>
      <br>
      <table>
        <thead><tr><td><b>First name</b></td><td><b>Last Name</b></td></tr></thead>
        <tr id="root"></tr>
      </table>
    </div>
    <br>
    <script>
      var data = [
        {"id": 1, "firstName": "John", "lastName": "Doe" },
        { "id": 2, "firstName": "Jane", "lastName": "Doe" },
        { "id": 3, "firstName": "Bill", "lastName": "Doe" }, 
        { "id": 4, "firstName": "Abraham", "lastName": "Lincoln" },
        { "id": 5, "firstName": "Bill", "lastName": "Gates" }, 
        { "id": 6, "firstName": "Steve", "lastName": "Jobs" },
        { "id": 7, "firstName": "Bill", "lastName": "Clinton" },
        { "id": 8, "firstName": "Joe", "lastName": "Biden" },
        { "id": 9, "firstName": "Kamala", "lastName": "Harris" },
        { "id": 10, "firstName": "Queen", "lastName": "Elizabeth" },
        { "id": 11, "firstName": "Bob", "lastName": "Doe" }
      ];
      var root = document.getElementById('root');
      data.forEach(element => root.insertAdjacentHTML('beforebegin', `<tr><td>${element.firstName}</td><td>${element.lastName}</td></tr>`));
    </script>
  </body>
</html>

Blog

Let's create a table using JSON and JavaScript

manu

Step 1 - Create JSON

Step 2 - Insert it in JS

Step 3 - Create a HTML file

Step 4 - The fun part.

Final code

Join Our Newsletter. No Spam, Only the good stuff.

Related