DEV Community

manu
manu

Posted on • Edited on

6 1

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" }
]
Enter fullscreen mode Exit fullscreen mode

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" }
];
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>`));
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)