JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<div id="out"></div>

JavaScript

var data = {
   list:[
      {
         name:"1",
         children:[
            {
               name:"1.1",
               children:[]
            },
            {
               name:"1.2",
               children:[
                  {
                     name:"1.2.1",
                     children:[]
                  }
               ]
            }
         ]
      },
      {
         name:"2",
         children:[
            {
               name:"2.1",
               children:[
                  {
                     name:"2.1.1",
                     children:[]
                  },           
                  {
                     name:"2.1.2",
                     children:[]
                  },               
                  {
                     name:"2.1.3",
                     children:[]
                  }
               ]
            },
            {
               name:"2.2",
               children:[]
            },
            {
               name:"2.3",
               children:[]
            }
         ]
      },
      {
         name:"3",
         children:[
            {
               name:"3.1",
               children:[]
            }
         ]
      }
   ]
}

console.log(data);

var html = "";
function buildList(a){
    
    if(a.length == 0){return};
    
    html += "<ul>";
    for(var i=0; i<a.length;i++)
    {
        html += "<li>"+a[i].name;
        buildList(a[i].children);
        html += "</li>";
    }
    html += "</ul>";            
}
buildList(data.list);
    
$("#out").html(html);