JSFiddle - React, Tailwind, and code Playground

by TicoRicoRay

HTML

<input type="button" 
    onclick="document.body.appendChild(parseNodes(jsonData))"
    value="go" />

JavaScript

function parseNodes(nodes) { 
  // takes a nodes array and turns it into a <ol>
    var ol = document.createElement("UL");
  if(Array.isArray(nodes))
  {
  
    for(var i=0; i<nodes.length; i++) {
    	ol.appendChild(parseNode(nodes[i]));
    
  } 
  }else {
    var li = document.createElement("LI");
    li.innerHTML=node;
    return li;
  }
  
    return ol;
}

function parseNode(node) { 
  // takes a node object and turns it into a <li>
    var li = document.createElement("LI");
    if(Array.isArray(node)) 
    {li.appendChild(parseNodes(node));} 
  else 
  {li.innerHTML = node;}
    return li;
}


window.jsonData = [
    "Item 1", [
      "Item 1.1", [
        "Item 1.1.a"
      ],
      "Item 1.2", [
        "Item 1.2.a",
        "Item 1.2.b",
        "Item 1.2.c"
      ],
      "Item 1.3", [
        "Item 1.3.a", [
          "Item 1.3.a.i",
          "Item 1.3.a.ii"
        ]
      ]
    
  ],
  "Item 2", [
    "item 2.a",
    "Item 2.b"
  ]
]
;