JSFiddle - React, Tailwind, and code Playground

by Noir Noir

JavaScript

let tree = {
    label: 'Beverages',
    children: [
        {label: 'Water'},
        {label: 'Coffee'},
        {
            label: 'Tea',
            children: [
                {label: 'Black Tea'},
                {label: 'White Tea'},
                {
                    label: 'Green Tea',
                    children: [
                        {label: 'Sencha'},
                        {label: 'Gyokuro'},
                        {label: 'Matcha'},
                        {label: 'Pi Lo Chun'}
                    ]
                }
            ]
        }
    ]
};

function drawTree(obj, el, root) {
  if (obj.children) {
    const list = document.createElement('ul');
    if(root) list.className = 'tree-view';
    else list.className = 'nested';
    el.appendChild(list);
    Object.keys(obj.children).forEach(key => {
      const dir = obj.children[key];
      let text;
      const list_el = document.createElement('li');
      if(key == 0) {
        text = document.createElement('span');
        text.className = 'box';
        text.innerHTML = (dir.label);
      }
      else {
        text = document.createTextNode(dir.label);
      }
      list_el.appendChild(text);
      list.appendChild(list_el);

      drawTree(dir, list_el);
    });
  }
}

drawTree(tree, document.body, true);