JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<div class="container">
  <div class="table-responsive">
    <h1>JSON data to HTML</h1>
    <br />
    <table class="table table-bordered table-striped" id="employee_table">
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>gender</th>
        <th>age</th>
      </tr>
    </table>
  </div>
</div>

JavaScript

var jsondata = [{
    "id": "1",
    "name": "Jim",
    "adress": "Red Square, 12",
    "gender": "Man",
    "age": "35"
  },
  {
    "id": "1",
    "name": "John",
    "adress": "Red, 12",
    "gender": "Man",
    "age": "35"
  }
]
var employee_data = '';
jsondata.forEach(function(value) {
  employee_data += '<tr>';
  employee_data += '<td>' + value.name + '</td>';
  employee_data += '<td>' + value.adress + '</td>';
  employee_data += '<td>' + value.gender + '</td>';
  employee_data += '<td>' + value.age + '</td>';
  employee_data += '</tr>';
});
document.querySelector('#employee_table').innerHTML += employee_data;