I wanted to convert hierarchical data expressed in a flattened self-referencing table (in csv) back to a decent hierarchical JSON structure.

In other words…

To do this I created a few javascript classes to support a simple tree datastructure DataStructures.Tree. You can find the source, an example using d3 to illustrate the hierarchy and tests on github.

Tree has a root node, the ability to find a node in itself (given an optional matching function) and importantly a factory method that can create a tree given a flat self referencing table. DataStructures.TreeNode has children reference which is instantiated as a DataStructures.TreeNodeCollection.

To simplify traversal I made Tree able to iterate through its nodes by using a depth first non-recursive approach (by using a queue) to finding the next node.

Once I had the initial structure in place, the next task was to convert from this Tree structure and its attributes (which had a lot to do with traversal and relationships), back to a simple leaner json object, so I added a toSimpleObject method, which also allows for a decorator function to be passed in to do bespoke formatting/manipulation.

This was particularly useful for the d3 case that I wanted to use this with (see example in index.html), where I needed to add size values to leaf nodes and remove empty children attributes to indicate which nodes are actually leaves.

There are quite a few potential improvements I’ve already identified, in the building of the tree from csv I assume that parent nodes already exist when I come across a child row, and the algorithm could and should be optimized, but for now, I’m getting what I want from it!

If you’re interested, theres a set of unit tests written with QUnit to illustrate how it all fits together in the repo /js/lib/tests.

Blog Logo

Stephen James

JavaScript and Front-End Developer


Proudly published with Hexo

Stephen James' Code Blog

Back to Overview