StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POadvice on datastructure for ajax/javascript/jquery page
text
Body
copied!<p>This is a JavaScript/Ajax webpage (also using jQuery).</p> <p>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).</p> <p>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.</p> <p>My question:</p> <p>I have two options:</p> <p>1: Create a flat array:</p> <pre><code>[ {id: xx, children: [ xx, xx, .. ] }, ....] </code></pre> <p>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.)</p> <p>2: Create a nested array:</p> <pre><code>{ id: xx, children [ { id: xx, children : [....] }, {....} ] } </code></pre> <p>Then somehow bind the children in the array to the element when I display it.</p> <p>I have two problems with this second approach:</p> <p>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?)</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload