Databases
StackOverflow2013
Postsdbo
POHTML Tree Diagram using JSON data
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML Tree Diagram using JSON data
    primarykey
    data
    text
    <p>So I've got some JSON like this (keys/values changed for privacy reasons). It's basically an Object with a "children" array of Objects, with each element having its own "children" array of Objects, et cetera.</p> <pre><code>{ "name": "Main Area", "children": [ { "name": "Sub-section A", "children": [ { "name": "Procedure 1" "children": [ { "name": "Sub-procedure A", "children": null }, { "name": "Sub-procedure A", "children": null }, { "name": "Sub-procedure A", "children": null } ] }, { "name": "Procedure 2" "children": [ { "name": "Sub-procedure A", "children": null }, { "name": "Sub-procedure A", "children": null }, { "name": "Sub-procedure A", "children": null } ] }, { "name": "Procedure 3" "children": [ { "name": "Sub-procedure A", "children": null }, { "name": "Sub-procedure A", "children": null }, { "name": "Sub-procedure A", "children": null } ] }, ] } ] } </code></pre> <p>... and it's possible that that gets several times larger/deeper as I go along. The goal here is to transform this data into a (collapsable) tree diagram and then showing it on a HTML page using knockout.js (preferably). All the logic has to be JavaScript code though (grab JSON with jQuery AJAX, treat it in some way, show it).</p> <p>Like this only then rotated 90 degrees so it goes down and not to the side. <a href="http://www.education.vic.gov.au/images/content/studentlearning/mathscontinuum/icecream.gif" rel="nofollow">http://www.education.vic.gov.au/images/content/studentlearning/mathscontinuum/icecream.gif</a></p> <p>Now I know that there are libraries like jsTree out there, but the point is that I want this to be a learning experience as well so I want to create my own code here. Also, jsTree prints its structures like a directory tree. The thing I'm looking for is a more visual top-down tree diagram that fills the whole width of the page.</p> <p>Thing is, I'm stuck. I just can't wrap my head around all these nested arrays/objects. I've probably spent about 3 hours trying things, creating several different functions to iterate recursively through the entire array but I can't get it to work right.</p> <p>The latest idea that crossed my mind was to somehow go through the JSON structure, starting from the deepest element, moving upwards, somehow translating the steps into tree diagram levels, until I reach the top, at which point it's finished.</p> <p>So, willing to point me in the right direction? You don't have to write dozens of lines of code for me, just give me an indication, some pseudocode perhaps, of where I should take this.</p> <p>Thanks in advance!</p> <p><strong>UPDATE</strong></p> <p>I've come a bit futher. Just thought I'd share my code for future reference. I now have a populated array of node objects and a basic ul/li structure (can still throw knockout.js at it later). Still have to figure out the CSS/JS part but that'll come as I go along.</p> <p>Something worth noting is that I changed every "null" value in the JSON structure to "[]", this is more convenient to use in this context.</p> <pre><code>//node class function node(label, children, node_id, parent_id) { this.label = label; this.children = children; this.node_id = node_id; this.parent_id = parent_id; } //tree class function tree(root) { var self = this; self.root = root; if(!$.isArray(self.root.children)) { return; } self.nodeCount = 0; self.nodes = []; //This will be the main node array //Adds nodes to the array, recursive self.addNode = function(_node) { self.nodeCount++; self.nodes.push(_node); //Check if the branch ends here if(_node.children.length &lt; 1) { return; } var tmpParent = _node; //Add children for(var i = 0; i &lt; _node.children.length; i++) { self.addNode(new node(_node.children[i].name, _node.children[i].children, self.nodeCount, tmpParent.node_id)); } } self.draw = function() { //Populate nodes array self.rootNode = new node(self.root.name, self.root.children, 0, -1); self.addNode(self.rootNode); //Kicks off the recursion //Create the first/"root" node $(".tree-wrapper").append('&lt;ul id="0"&gt;&lt;li class="title"&gt;'+ self.rootNode.label +'&lt;/li&gt;&lt;/ul&gt;'); //Create nodes and populate them with children for(var i = 0; i &lt; self.nodes.length; i++) { //Check if the node has children if(self.nodes[i].children.length &gt; 0) { //Wrap a new &lt;ul&gt; in a &lt;li&gt;, add a title &lt;li&gt; to the created &lt;ul&gt; $("#"+ self.nodes[i].parent_id).append('&lt;li&gt;&lt;ul id="'+ self.nodes[i].node_id +'"&gt;&lt;li class="title"&gt;'+ self.nodes[i].label +'&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'); } else { //Simply append a &lt;li&gt; with a label to the parent &lt;ul&gt; $("#"+ self.nodes[i].parent_id).append('&lt;li id="'+ self.nodes[i].node_id +'"&gt;'+ self.nodes[i].label +'&lt;/li&gt;'); } } } } </code></pre> <p><strong>Thank you to everyone who answered!</strong> If you have hints/tips don't hesitate ;) My code can probably be shortened/optimized in some way!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USFloris
    1. USFloris
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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