DEV Community

loading...

Let's create a table using JSON and JavaScript

π™ΌπšŠπš—πšžπšƒπš‘πšŽπ™²πš˜πšπšŽπš›
π™Όπš’ πš—πšŠπš–πšŽ πš’πšœ π™ΌπšŠπš—πšž, πšŠπš—πš 𝙸'πš– 𝚊 𝟷𝟹-πš’πšŽπšŠπš›-πš˜πš•πš πšπšžπš•πš• πšœπšπšŠπšŒπš” 𝚍𝚎𝚟 πš πš‘πš˜ πš˜πš πš—πšœ πš πšŽπš‹πšœπš’πšπšŽπšœ πšŠπš—πš πšœπšŽπš›πšŸπšŽπš›πšœ πšŠπšŒπš›πš˜πšœπšœ πšπš‘πšŽ πš πš˜πš›πš•πš. 𝙸 πšŽπš—πš“πš˜πš’ πš™πš›πš˜πšπš›πšŠπš–πš–πš’πš—πš πš’πš— π™·πšƒπ™Όπ™», π™²πš‚πš‚, πš•πš˜πšπšœ 𝚘𝚏 π™Ήπš‚, 𝚁𝚎𝚊𝚌𝚝, 𝙿𝙷𝙿, πšŠπš—πš πš‚πš€π™»
・2 min read

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

Discussion (0)