Embedding an HTML (String) Generated from a Tree Structured JSON

Question

How to make insertJson faster (I should keep the script compatible with old versions of IE and other browsers)?

Problem

innerHTML of this section tag:

<section id="two"></section>

is created by loading json.txt to window[p]:

// Gets a tree structure JSON: 
getJsonTxt({p:'dir/dir/json.txt'});

Then, it adds the generated HTML to section tag using:

setTimeout(function(){
 insertJson(window['p'],{t:"two"});
}, 1200);

It also take ~100-200 mili-seconds that window[p] to be ready for insertJson. I added a 1200 safe-line with setTimeout function - which is inefficient.

What would be the fastest function to replace setTimeout with? I tried a recursive function before which was checking each mili-second for window['p'] to be ready. Unfortunately, I could not make it work.

insertJson:

// z is json.txt and g is section
insertJson:function(z,g){
 if(z==null){return;}
 z=z.trim();
 z=JSON.parse(z);
 var a,c,d,e,p,i,j,t,p=[];a=document.getElementById(g.t);
 for(i in z){
 if(a==null){break;}
 if(i==1){continue;}
 c=null;/*current element class name*/
 d=z[i].d; /*current element depth*/
 e=null; /*current element*/
 if(z[i].a!=undefined){
 if(z[i].a.class!=undefined){
 c=z[i].a.class+" i".concat(i,"-d",d);
 }else{
 c="i".concat(i,"-d",d);
 }
 }else{
 c="i".concat(i,"-d",d);
 }
 p[d]=c;e=document.createElement(z[i].t); /*create the new element*/
 if(z[i].x!=undefined){
 t=document.createTextNode(z[i].x);e.appendChild(t);
 } /*element text*/
 if(z[i].a!=undefined){
 for(j in z[i].a){
 if(j!='class'){
 e.setAttribute(j,z[i].a[j]);
 }
 }
 } /*non-class attributes*/
 e.setAttribute("class",c); /*class attribute*/
 if(i==0){a.appendChild(e);}
 if(i>0){a.getElementsByClassName(p[(d-1)])[0].appendChild(e);}
 }
}

getJsonTxt:

This is just a XMLHttpRequest to add JSON object to the window.

/*get json.txt*/
getJsonTxt:function(z){
 var g,h,x=[];
 Object.keys(z).forEach(function(a,b,c){
 window[a]=null;
 x[b]=new XMLHttpRequest();
 url=window.location.origin.concat('/',z[a.toString()]);
 x[b].open("GET",url,true);
 x[b].onreadystatechange=function (z){
 if(x[b].readyState===4){
 if(x[b].status===200 || x[b].status==0){
 window[a]=x[b].responseText;
 }
 }
 }
 x[b].send();
 });
}

json.txt

d is the branch depth in tree, t is the HTML tag and as are attributes of HTML tags being generated:

[{"d":0,"t":"div","a":{"class":"ro"}},
 {"d": 1,"t": "input","a": {"a": "index","b": null,"c": "Market Indices","class": "di-0","d": "Near-Real-Time Sector Estimation","id": "index","type": "hidden","z": ""}},
 {"d":1,"t":"div","a":{"class":"ro di-2 tx-1 p-5 a120 a220 a320 a420 a520 a620 a720"}},
 {"d":2,"t":"ins","a":{"class":"adsbygoogle","style":"display:block","data-ad-client":"ca-pub-1444970657765319","data-ad-slot":"9621343003","data-ad-format":"auto"}},
 {"d":1,"t":"div","a":{"class":"ro di-2 p-3 a120 a220 a320 a420 a520 a620 a720 r113"}},
 {"d":2,"t":"h1","a":{"class":"ro s16 fw-6 tx-1 r113 mv-3"},"x":"Near-Real-Time Sector Forecast"},
 {"d":2,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 tx-1 s15 p-2 mv-3 bx-2"}},
 {"d":3,"t":"b","a":{"class":"s12 a120 a220 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"💹 Stocks"},
 {"d":3,"t":"b","a":{"class":"s14 a120 a220 a318 a418 a518 a618 a718 r113 mv-2 tx-1 di-1 fw-6"},"x":"🇺🇸 Sector Speculator"},
 {"d":3,"t":"b","a":{"class":"s12 a120 a220 a318 a418 a518 a618 a718 r110 mv-2 tx-2 di-1"},"x":"🏛 Markets"},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a320 a420 a520 a620 a720 sq-1 r113"}},
 {"d":3,"t":"h3","a":{"class":"ro s15 mv-4 fw-6 tx-1"},"x":"Current Average Markets Forecast"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720"}},
 {"d":4,"t":"b","a":{"class":"s16 a118 a218 a318 a418 a518 a618 a718 r190 t-12 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s16 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s16 a118 a218 a318 a418 a518 a618 a718 r140 t-19 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-5 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Overall"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":1,"t":"div","a":{"class":"ro di-2 p-3 a120 a220 a320 a420 a520 a620 a720"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"💻 IT"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"IT"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🛰 Telecom"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Telecommunication"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"💵 Finance"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Finance"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏗 Energy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Energy"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏭 Industrials"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Industrials"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"⚗ Materials"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Materials and Chemicals"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🕯 Utilities"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Utilities"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🎪 Discretionary"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Consumer Discretionary"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🍞 Staples"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Consumer Staples"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🚀 Defense"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Defense"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏩 Healthcare"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Health"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}},
 {"d":2,"t":"div","a":{"class":"ro di-2 a120 a220 a319 a419 a518 a618 a718 sq-1 r113"}},
 {"d":3,"t":"h4","a":{"class":"ro s14 mv-3 fw-6 tx-1"},"x":"🏘 Real Estate"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 br-2"}},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r110 mv-2 tx-0 di-1"},"x":"Sell"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r111 mv-2 tx-1 di-1"},"x":"Hold"},
 {"d":4,"t":"b","a":{"class":"s11 a118 a218 a318 a418 a518 a618 a718 r112 mv-2 tx-2 di-1"},"x":"Buy"},
 {"d":3,"t":"div","a":{"class":"ro a120 a220 a320 a420 a520 a620 a720 g-3 fh-1 sq-2"}},
 {"d":3,"t":"div","a":{"class":"u1 di-1","style":"padding-left:50%;","data":"Real Estate"}},
 {"d":4,"t":"div","a":{"class":"bx-1 s10 fw-6 ml-5 di-1"}},
 {"d":4,"t":"div","a":{"class":"tg-up"}}
]

Answer 1

Don't write functions with ten one-letter variables in them. If you want to conserve bandwidth, enable gzip compression on the web server or use a minifier program.

Try building a string of HTML and inserting it all at once, so that the DOM isn't updated so often.

Instead of querying class names over and over, keep track of what depth you're at and what unclosed tags are out there. Every time you encounter a depth equal or less than the previous one, close all pending tags at that depth or deeper.

function closeTags(mindepth, stack) { 
 var closes="";
 while (stack.length && stack[stack.length-1].depth >= mindepth) {
 var popped=stack.pop();
 closes += " ".repeat(popped.depth) + "</" + popped.tag + ">\n";
 }
 return closes;
}
function insertJson(json,target){
 var lastdepth=0,
 tagstack=[],
 html="";
 json=JSON.parse(json.trim());
 for(i of json.filter( i => i.t )){
 var depth=i.d || 0,
 tag=i.t,
 attrs=i.a || {},
 innerText=i.x || "",
 indent=" ".repeat(depth),
 attrHtml=Object.keys(attrs).map(a => `${a}="${attrs[a]}"`).join(" ");
 if (depth <= lastdepth) html += closeTags(depth, tagstack);
 html += `${indent}<${tag} ${attrHtml}>${innerText}\n`;
 tagstack.push( {tag,depth} );
 lastdepth=depth;
 }
 document.getElementById(target.t).innerHTML = html + closeTags(0, tagstack); 
}
 insertJson(json,{t:"two"})

• Oh My Goodness: Yes, remove it. Invoke insertJson from getJsonTxt, when the XHR completes, with no timeout.
• Sᴀᴍ Onᴇᴌᴀ: @Emma note that the code above in insertJson uses template literals, an ecmascript-6 feature not supported by IE
• Sᴀᴍ Onᴇᴌᴀ: @Emma - other ES6 features used in the code above that IE doesn't support: arrow functions and for...of loops