Faster Algorithm to Embed an HTML (String) Generated from a Tree Structure JSONGenerate HTML from...
Is there hidden data in this .blend file? Trying to minimize the file size
Knowing when to use pictures over words
(easy?) Matrix with wide blocks
Why is working on the same position for more than 15 years not a red flag?
How to remove trailing forward slash
En Passant For Beginners
What is the wife of a henpecked husband called?
How would an AI self awareness kill switch work?
Explain the objections to these measures against human trafficking
How would one buy a used TIE Fighter or X-Wing?
What is this metal M-shaped device for?
How to join 2 tables in mysql but with different values in one of the tables
What to do if authors don't respond to my serious concerns about their paper?
Would a National Army of mercenaries be a feasible idea?
Recrystallisation of dibenzylideneacetone
What to do when being responsible for data protection in your lab, yet advice is ignored?
How to avoid being sexist when trying to employ someone to function in a very sexist environment?
"On one hand" vs "on the one hand."
It took me a lot of time to make this, pls like. (YouTube Comments #1)
What's the most convenient time of year in the USA to end the world?
Program that converts a number to a letter of the alphabet
Can you earn endless XP using a Flameskull and its self-revival feature?
Reference on complex cobordism
What is the purpose of easy combat scenarios that don't need resource expenditure?
Faster Algorithm to Embed an HTML (String) Generated from a Tree Structure JSON
Generate HTML from JSONRendering JSON array as a treeBinary tree data structureSpecialty tree structure - BK TreeConverts the JSON object to another structure of JSONBuilding a nested tree structure from an ordered listSelectively flatten JSON structureExtracting JSON from string using regexJSON to data structure in JavascriptCreate a hierarchical tree for a JSON response
0
$begingroup$
Would it be possible to make insertJson function faster or maybe more efficient in any way (I should keep the script compatible with old versions of IEs and other browsers)?
Sorry about my codes that I had to write with short variables and thanks so much!
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"}}
]
I appreciate any help.
You might view in this domain how this task is currently down-performing.
javascript performance algorithm tree json
asked 2 hours ago
EmmaEmma
1156
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
0
$begingroup$
Would it be possible to make insertJson function faster or maybe more efficient in any way (I should keep the script compatible with old versions of IEs and other browsers)?
Sorry about my codes that I had to write with short variables and thanks so much!
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"}}
]
I appreciate any help.
You might view in this domain how this task is currently down-performing.
javascript performance algorithm tree json
asked 2 hours ago
EmmaEmma
1156
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
0
0
0
$begingroup$
Would it be possible to make insertJson function faster or maybe more efficient in any way (I should keep the script compatible with old versions of IEs and other browsers)?
Sorry about my codes that I had to write with short variables and thanks so much!
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"}}
]
I appreciate any help.
You might view in this domain how this task is currently down-performing.
javascript performance algorithm tree json
asked 2 hours ago
EmmaEmma
1156
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
Would it be possible to make insertJson function faster or maybe more efficient in any way (I should keep the script compatible with old versions of IEs and other browsers)?
Sorry about my codes that I had to write with short variables and thanks so much!
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"}}
]
I appreciate any help.
You might view in this domain how this task is currently down-performing.
javascript performance algorithm tree json
javascript performance algorithm tree json
asked 2 hours ago
EmmaEmma
1156
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 hours ago
EmmaEmma
1156
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 4 mins ago
Emma
asked 2 hours ago
EmmaEmma
1156
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 hours ago
EmmaEmma
1156
asked 2 hours ago
EmmaEmma
1156
1156
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Emma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
$begingroup$
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"})
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
$endgroup$
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Emma is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f214610%2ffaster-algorithm-to-embed-an-html-string-generated-from-a-tree-structure-json%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
$begingroup$
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"})
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
$endgroup$
add a comment |
1
$begingroup$
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"})
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
$endgroup$
add a comment |
1
1
1
$begingroup$
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"})
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
$endgroup$
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"})
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
answered 34 mins ago
Oh My GoodnessOh My Goodness
66029
66029
add a comment |
add a comment |
Emma is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Emma is a new contributor. Be nice, and check out our Code of Conduct.
Emma is a new contributor. Be nice, and check out our Code of Conduct.
Emma is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f214610%2ffaster-algorithm-to-embed-an-html-string-generated-from-a-tree-structure-json%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
