javascript - problems building cascading lists -

I have a Jason that comes from the server (can not be changed) and I want to create a nested Unordered list menu the wanted .

Here - the warning is! It takes a long time to run and this is just sample data - the actual stuff is quite big.

Anyhow it gets disturbed and I end up with many things and takes it forever to run. / P>

Code:

  $ (JData, function (k, v) {var vendor = JSON.stringify (k); vendor = vendor. Location (/ "/ g, ''); var vendorrow = '& lt; li data-vendor ="' Vendor + '"class =" list item v "& gt;' + seller + '& lt; / li & gt;' $ ('ul # (' & lt; ul class =" sub hide "/> ); Var (Vendors '). Endand (Vendorau); $ (' UL # Vendors Li [Data-Seller * '' + Vendor + '"]'). Area = Area. (/" / G, '') ; $ ('UL # Vendors li' [data-$ ('UL # vendors li [data-area =' '+ area +' "] ') .andand (' ' '); Var getmarket = _.group by (regegan [region], 'market'); $ .ei (Mill Market, Function (K, V) {var market = JSON.stringify (k); market = market.replace (/ "/ g, ''); var this market = '& lt; li data- Market ("Market" = " ; $ ('UL # Vendors Li [Adend ('  class = "sub hide" />; var getSwitch = _.group by (mill market [market], 'switch'); $ Each (getSwitch, function (k, v) {var vSwitch = JSON.stringify (k); vSwitch = vSwitch.replace (/ "/ g, ''); var This Swiss = '& lt; li data-switch =" '+ VSwitch +' "class =" listItems "> '+ vSwitch +'  '$ $ (' UL # 'vendor Tao Li [Data-Market = "'+ + Market +'" ul.sub ') .append (thisSwitch);});});}); }); });   
 Example output:  
  & lt; Div id = "chartWizard" & gt; & Lt; Ul id = "vendors" & gt; & Lt; Li class = "list item v" data-vendor = "levy" & gt; Levador & lt; Ul class = "sub hide" & gt; & Lt; Li class = "list" is a data-area = "midwest" & gt; Midwest & lt; Ul class = "sub hide" & gt; ... & lt; / Ul & gt; & Lt; Ul class = "sub hide" & gt; ... & lt; / Ul & gt; & Lt; Ul class = "sub hide" & gt; ... & lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; 
 
   
 Many ul.sub in this list has to fall with different ul.sub elements where there should be only one.  
  
 
 
 I think that using the rearrangement, my object rewritten my code by logically logging it The right way to go right is to go somewhere along with the line that runs on your commodity, this is the reason why it should be taken so long to load it. I started my example again and I came with it here.   
  doRecursive (jadata, blank, $ ('ul # vendors'), 0) You can probably take it out to make it more readable. ; Function doRecursive (grp, guardian, selector, depth) {$ .each (grp, function (k, v) {var item = JSON.stringify (k) .replace (/ "/ g, ''); var element = [ 'Field', 'field', 'market', 'switch'] [depth]; var selector = 'data-' + element = '' + + + object '' '' var isitem = $ ('& lt ; Li '+ ThisSelector +' class = "listItem '+ (element element [0]:' ') +'" & gt; '+ item +'  '); selector.append (thisItem ); Var childList = $ ('& lt; ul class = "sub hide" />; thisItem.append (childList); if (! Element) {return;} var next = _.group by (grp [Item], element; doRcursive (next, item, hair list, depth + 1);});}