JSFiddle - React, Tailwind, and code Playground

by beebul

HTML

<div id="console-log"></div>


<select id="selectRoles">
  <option>Choose a Role</option>
</select>

CSS

.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

var consoleLine = "<p class=\"console-line\"></p>";
 
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};


var select = document.getElementById("selectNumber");

var roles = {
  categories: [{
    name: 'Administration',
    role: ['Administrator', 'Contracts Administration', 'Auditor', 'Customer Services', 'Data Management', 'Document Control', 'General Assistant', 'HSE Administration']
  }, {
    name: 'Commerce',
    role: ['Accountant', 'Accounts Assistant', 'Acquisitions And Mergers', 'Business Analyst', 'Commercial Analyst', 'Energy Analyst', 'Market Analyst', 'Risk Analyst', 'Auditor', 'Banker', 'Book Keeper']
  }, {
    name: 'Design',
    role: ['Architecture General', 'Naval Architecture', 'CAD', 'Electrical', 'Instrument', 'Graphic', 'PDMS / PDS', 'Piping', 'Plant And Platform', 'Subsea']
  }]
};

var adminRoles = roles.categories.filter(function(category) {
  return category.name === 'Administration'
});

for (var key in adminRoles.role) {
    var obj = adminRoles.role[key];
    console.log(key);
}