JSFiddle - React, Tailwind, and code Playground

HTML

<table class="red" style="width: 100%; height: 100%;">
  <thead>
    <tr>
      <th>Category</th>
      <th class="right">Rele Completed</th>
      <th class="right">Eval Completed</th>
    </tr>
  </thead>
  <tbody id="display" class="no-border-x">
  </tbody>
</table>

JavaScript

var json = {
  "categoryName": [
    "Construction",
    "Emergency Response",
    "Equipment",
    "General",
    "General Safety",
    "Marine",
    "Materials",
    "Products",
    "Protection of Workers",
    "Transport",
    "Workplace"
  ],
  "locTable": [{
    "evaluationPercent": 100,
    "relevancePercent": 100,
    "category": "Workplace",
    "ldloc": []
  }, {
    "evaluationPercent": 100,
    "relevancePercent": 100,
    "category": "Workplace",
    "ldloc": []
  }, {
    "evaluationPercent": 100,
    "relevancePercent": 100,
    "category": "Workplace",
    "ldloc": []
  }]
};

var trHTML = '';
jQuery.each(json.locTable, function(k, item) {
  trHTML += '<tr><td>' + item.category + '</td><td>' + item.evaluationPercent + '</td><td>' + item.relevancePercent +
    '</td></tr>';
});
jQuery('#display').append(trHTML);