Question

This is a JavaScript/Ajax webpage (also using jQuery).

I have a nested structure I need to display. After displaying a top level element, users can click on it, and see levels below it (dynamically generated).

I don’t want to pre-generate everything and hide it with display: none (the page is complex, I’m simplifying for this question) – I want to build the display from the javascript array that was fetched with ajax.

My question:

I have two options:

1: Create a flat array:

[ {id: xx, children: [ xx, xx, .. ] }, ....]

Then for the onclick of an element I get the id from the array, find the children, pull them up from the array and display them. (I guess I’ll have to search through the array, since there are no associative arrays in javascript – or make an index.)

2: Create a nested array:

{ id: xx, children [ { id: xx, children : [....] }, {....} ] }

Then somehow bind the children in the array to the element when I display it.

I have two problems with this second approach:

A: I’m constantly copying large chunks of the array for each child when I create it. (At least I think I am. Do I need to use deep copy? Can I make a reference?)

B: I’m not sure how to bind the data to the child element. Normally I build the display using html strings with onClicks, then append the entire thing. But onClicks can only take an ID, not a copy of an array.

Answer 1

I did something similar recently where I had a very large nested structure (over 2000 nodes) – which I did not want to bulk append to the DOM.

What I ended up doing was taking the ajax loaded data and converting it into a nested structure…

<node id="1" title="a">
  <node id="2" title="b />
  <node id="3" title="b">
      <node id="4" title="d" />
  </node>
</node> etc...

…and storing this as a jQuery object (nodes), but never appending it to the DOM.

I could then select the immediate children of a node as I needed them relatively easily, for converting into html elements and appending to the DOM, adding data, etc…

$("#"+ID+">node", nodes).each(function() { 
    var node = $(this);
    //do whatever... 
});

I don’t know if this is the most memory-efficient approach, but it certainly makes it very easy to select and append the immediate children of a node to the DOM as you need them.