How to show data from JSON within HTML table of content block?

[akshay parekar1]

Hi all, i have a requirement where i will get a JSON which i have to dynamically populate in an HTML table created within content block.

  Can anyone help me out how i can show the below static data in HTML table?

Thanks in advance!!

Content Block Script---

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <script>

   {

“Vendor Management”:”Alex”,

“Audit Management”:”Shaun”,

“Policy Management”:”Rhyms”

}

</script>

<table class="table table-bordered">

<!-- <table width="100%" style="table-layout:fixed;"> -->

<tr>

<th>Department</th>

<th>Contact</th>

</tr>

</table>

</j:jelly>

[Ratnakar7 · Accepted solution]

Hi @akshay parekar1 ,

You can use JavaScript to parse the JSON and manipulate the HTML table accordingly. Here's an updated version of your content block script:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
 
   <script>
   var jsonData = {
      "Vendor Management": "Alex",
      "Audit Management": "Shaun",
      "Policy Management": "Rhyms"
   };
   
   // Function to populate the HTML table with JSON data
   function populateTable() {
      var table = document.querySelector('.table-bordered');
      var tableBody = table.querySelector('tbody');
      
      // Loop through the JSON data and create table rows
      for (var key in jsonData) {
         var row = document.createElement('tr');
         var departmentCell = document.createElement('td');
         var contactCell = document.createElement('td');
         
         departmentCell.textContent = key;
         contactCell.textContent = jsonData[key];
         
         row.appendChild(departmentCell);
         row.appendChild(contactCell);
         
         tableBody.appendChild(row);
      }
   }
   
   // Call the populateTable function to populate the HTML table
   populateTable();
   </script>
 
<table class="table table-bordered">
   <thead>
      <tr>
         <th>Department</th>
         <th>Contact</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>
   
</j:jelly>

Thanks,

Ratnakar