Need help in display tree structure using Ractive js

Question

I am new to Ractive js. I need to display organisational hierarchy in a form of tree. I have 1 array defined in my Ractive template.

managerTeam = {M1: [T1, T2, M2, T3], M2: [M3, T4,T5],  M3: [T6,T7]}; 

where M1 is the root manager, T1-T7 are leaf nodes (team members)

How should I display it using jsTree or any other library?

Answer 1

To use jsTree you will have to:

1. add jsTree library to your page
2. turn your managerTeam object into format acceptable for jsTree, like this:

managerTeam = [{ "id":"m1", "text": "M1", "children": [ {"parent": "m1", "text": "T1"}, {"parent": "m1", "text": "T2"}, {"parent": "m1", "text": "M2"}, {"parent": "m1", "text": "T3"} ], "state":{"opened":true}}, { "parent": "root", "id": "m2", "text": "M2", "children": [ {"parent": "m2", "text": "M3"}, {"parent": "m2", "text": "T4"}, {"parent": "m2", "text": "T5"} ], "state":{"opened":true}}, { "id": "m3", "text": "M3", "children": [ {"parent": "m3", "text": "T6"}, {"parent": "m3", "text": "T7"} ], "state":{"opened":true}}]

3. write some configuration code for the div on your page that will be turned into tree according to jsTree rules and run it after DOM is loaded

An example of that you can see here: Fiddle