JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div>

  <ul>
    <li>
      Complaints
      <ul id="complaints">
      </ul>
    </li>
  </ul>

  <ul>
    <li>Type
      <ul id="types">

      </ul>
    </li>
  </ul>

  <ul>
    <li>Issues
      <ul id="issues">
        <li>Fire Safety</li>
        <li>Structurela</li>
        <li>Electrical</li>
        <li>Excessive</li>
      </ul>
    </li>
  </ul>

  <ul>
    <li id="statuses">Status
      <ul>
        <li>Resolved</li>
        <li>Resolved II</li>
        <li>Not Resolved</li>
      </ul>
    </li>
  </ul>

  <ul>
    <li>Year
      <ul id="years">
        <li>2019</li>
        <li>2020</li>
        <li>2021</li>

      </ul>
    </li>
  </ul>

</div>

JavaScript

var json = {
  complaints: [
    'Factory covered',
    'Factory not covered',
  ],
  types: [
    'Engineer',
    'Occupational',
    'Reprisal',
    'NON-OSH',
  ]
};

setTimeout(() => {
  $.each(json.complaints, (k, v) => {
    $('<li>' + v + '</li>').appendTo('#complaints')
  })
  $.each(json.types, (k, v) => {
    $('<li>' + v + '</li>').appendTo('#types')
  })
}, 1000)