Store nested el tree

by fxi

HTML

<div id="root"></div>

CSS

.group {
  padding: 5px;
  background: #ddd;
  border-radius: 10px;
  min-height:30px;
  min-width:100px;
  border:1px solid #454545;
}

.view {
  background: #eee;
  border-radius: 5px;
  height:30px;
  width:100px;
  margin:2px;
  padding:2px;
}

JavaScript

const elRoot = document.getElementById("root");



let str = [{"g":"g0","t":"g","i":"g1"},{"g":"g1","t":"g","i":"g2"},{"g":"g2","t":"v","c":"d","i":"v7"},{"g":"g1","t":"v","c":"a","i":"v3"},{"g":"g1","t":"g","i":"g5"},{"g":"g5","t":"v","c":"c","i":"v6"},{"g":"g0","t":"v","c":"b","i":"v4"}];


str.forEach(mItem);

function mItem(d){
  var cl = d.t === 'v' ? 'view': 'group';
  var elG = document.createElement("div");
  elG.classList.add(cl);
  elG.classList.add('so');
  elG.id = d.i || Math.random().toString(32);
   elG.innerText= d.c ? d.c : d.i;

  if( d.g == 'g0' ){
   elRoot.appendChild(elG)
  }else{

   var elP = elRoot.querySelector('#'+d.g);
   elP.appendChild(elG)
  }
}

function gStruct(){
  var sOut = [];
  els = elRoot.querySelectorAll('.so');
  els.forEach(el => {
    var o = {};
    elP = el.parentElement;
    if(elP === elRoot){
     o.g = 'g0'
    }else{
     o.g = elP.id;
    }
    o.t = el.classList.contains('group')?'g':'v';
    if(o.t==='v'){
     o.c = el.innerText;
    }
    o.i = el.id;
    sOut.push(o);
  })
  var a = JSON.stringify(sOut);
  var b = JSON.stringify(str);
  console.log(a,b);
  console.log(a === b)
}

gStruct();