javascript - Creating page content from a large JSON -

i have large json object, serves data source page created. able load whole object, create divs , display it. when json big takes lot of time , whole content displayed. load each child separately, or display loaded content after each node (appending).

the json has following structure:

{     id:"0",     text:"",     children:[{         id:"0-0",         text:"",         children:[...]     },     {         id:"",         text:"0-1",         children:[...]     }] } 

when load object call function creates container based on root node , recursive function gets executed every child.

function loadroot(wholejson){     var rootdiv = '<div id="frag-' + wholejson.id + '"></div>';     return rootdiv; }  function loadchildren(wholejson){     rootdiv = $('#frag-' + wholejson.id);     wholejson.children.foreach(function(child){         loadchild(child);     }); }  function loadchild(node){     var newdiv = // create div here..     node.children.foreach(function(child){         loadchild(child);     });     newdiv += "</div>" //close             return newdiv; } 

this works, mentioned loads whole content @ once. how can achieve displaying of every child after it's created , not @ end of script execution, please?

i had similar problem. reason why happens javascript first processes function in background, , when done, it's changes made. not know if best way go. settimeout anonymous function worked me. set waiting time low.