JSFiddle - React, Tailwind, and code Playground

by ahonaker

HTML

<ul>
  <li>APS</li>
  <ul>
    <li>Employees</li>
    <ul>
      <li>Safety Culture & Workforce Planning</li>
    </ul>
    <li>Customer Value</li>
    <ul>
      <li>Customer Experience</li>
    </ul>
    <li>Security</li>
    <ul>
      <li>Security Risk Management</li>
    </ul>
    <li>Operational Excellence</li>
    <ul>
      <li>Top Quartile Reliability</li>
      <ul>
        <li>Reliability</li>
        <ul>
          <li>Reduce Outage Risk</li>
          <ul>
            <li>Reduce Outage Duration</li>
            <li>Reduce Outage Frequency</li>
          </ul>
          <li>Enable Proactive Maintenance</li>
          <ul>
            <li>Improve Preventive Maintenance</li>
            <ul>
              <li>Improve PM Effectiveness</li>
              <li>Optimize PMs (Frequency, Schedule)</li>
              <li>PM Coverage</li>
            </ul>
            <li>Enable Predictive Maintenance</li>
          </ul>
          <li>Improve Asset Health</li>
          <ul>
            <li>Reduce Maintenance</li>
            <li>Increase Asset Life</li>
          </ul>
          <li>Reduce Failures</li>
          <ul>
            <li>Improve Time to Repair</li>
            <li>Reduce Frequency</li>
            <li>Improve Failure Analysis</li>
            <ul>
              <li>Consistent & Accurate Cause Investigation & Coding (incl. reducing "Unknown")</li>
            </ul>
          </ul>
        </ul>
      </ul>
      <li>OE Risk Management</li>
      <li>Work Management Effectiveness</li>
      <ul>
        <li>Efficiency</li>
        <ul>
          <li>Ensure Healthy Backlog</li>
          <ul>
            <li>Scheduling Backlog</li>
            <li>Planning Backlog</li>
            <li>Ready Backlog</li>
          </ul>
          <li>Reduce Work Closure Time</li>
          <ul>
            <li>Material Return / Restocking</li>
            <li>Contracted Outside Services</li>
            <li>Time to Close</li>
          </ul>
          <li>Improve...

JavaScript

var result = [];
    
    function getChildren(element) {
    		var ret = [];
        
    		var nodes = $(element).children();
    
    		$.each(nodes, function(index){
        	 if ($(this).is("li")) {
             ret.push({
                  name: $(this).text(),
                  children: (index + 1 < nodes.length && $(nodes[index+1]).is("ul")) ? getChildren(nodes[index+1]) : []
             });  
           }
        });
        
        return ret;
    }
    
    $("#res").html(JSON.stringify(getChildren($('ul:first'))));