custom jstree JSON data parse into tree

Question

i have a simple JSON data which is this :

[  
   "env/child1/env/key1",
   "env/child1/key1",
   "env/child1/key2",
   "env/child1/",
   "env/child2/key1",
   "env/child2/key2",
   "env/child2/",
   "env/"
]

how can i make jsTree understands this tree and draw the tree ?

env
- child1
  - key1
  - key2

do i need to write a custom parsing function or is there a ready way for that.

Judging from the jsTree website, you would first need to instantiate the DOM according to the tree you want to build. Do you have the code where you do this? Did you place the jstree initialisation in the $(document).ready? — selten98, Jun 29 '17 at 12:59
i don't have anything ready , maybe some guidance that what to do so that i can start ps: i am using the demo files from the original jstree package — Vagho, Jun 29 '17 at 13:25
Can you change the way that JSON looks? Can you expand on it? — selten98, Jun 29 '17 at 14:08
this is the json that i get it's structure is fixed and can not be changed — Vagho, Jun 29 '17 at 14:14
JS tree tell you how you should structure your data: https://www.jstree.com/docs/json/. So you should probably change your array to follow that format. — selten98, Jun 29 '17 at 14:19
exactly .. and thats what i want to do .. which i am lost how to convert my json structure from file path alike to json alike — Vagho, Jun 29 '17 at 14:20
i was planning to iterate over the json array and do mkdir -p on linux and then by using this method https://stackoverflow.com/questions/25226208/represent-directory-tree-as-json and then parse the correct json to a jstree compatible version — Vagho, Jun 30 '17 at 06:01
there was no need for mkdir, thanks for your help .. i have finished my project — Vagho, Jul 03 '17 at 13:04

score 1 · Accepted Answer · answered Jun 29 '17 at 14:41

tree = {
    'core' : {
        'data' : [
        ]
    } 
}

data = [  
   "env/child1/env/key1",
   "env/child1/key1",
   "env/child1/key2",
   "env/child1/",
   "env/child2/key1",
   "env/child2/key2",
   "env/child2/",
   "env/"
];

minlen = -1;
picked = "";
for(i =0; i<data.length; i++) {
    if(data[i].length < minlen || minlen == -1) {
        minlen = data[i].length;
        picked = data[i];
    }
}

tree.core.data.push({ "id" : picked, "parent" : "#", "text" : picked })
xdata = data
xdata.splice(xdata.indexOf(picked), 1)

for(i =0; i<xdata.length; i++) {
    name = xdata[i]
    parent = ""
    if(name.substr(name.length-1,1) == '/') {
        xname = name.substr(0,name.length-1);
        parent = xname.substr(0,xname.lastIndexOf("/")+1)
    } else {
        parent = name.substr(0,name.lastIndexOf("/")+1)
    }
    tree.core.data.push({ "id" : name, "parent" : parent, "text" : name })
}
console.log(tree);

I followed the alternative JSON format.

Result:

{
  "core": {
    "data": [
      {
        "id": "env/",
        "parent": "#",
        "text": "env/"
      },
      {
        "id": "env/child1/env/key1",
        "parent": "env/child1/env/",
        "text": "env/child1/env/key1"
      },
      {
        "id": "env/child1/key1",
        "parent": "env/child1/",
        "text": "env/child1/key1"
      },
      {
        "id": "env/child1/key2",
        "parent": "env/child1/",
        "text": "env/child1/key2"
      },
      {
        "id": "env/child1/",
        "parent": "env/",
        "text": "env/child1/"
      },
      {
        "id": "env/child2/key1",
        "parent": "env/child2/",
        "text": "env/child2/key1"
      },
      {
        "id": "env/child2/key2",
        "parent": "env/child2/",
        "text": "env/child2/key2"
      },
      {
        "id": "env/child2/",
        "parent": "env/",
        "text": "env/child2/"
      }
    ]
  }
}

it worked until i had to create another folder next to the root env — Vagho, Jul 03 '17 at 21:43

score -1 · Answer 2 · answered Aug 02 '19 at 03:53

The above data missing parent "env/child1/env/" for child "env/child1/env/key1" 1. correct as follow: data = [ "env/child1/env/" "env/child1/env/key1", "env/child1/key1", "env/child1/key2", "env/child1/", "env/child2/key1", "env/child2/key2", "env/child2/", "env/" ];

The complete code for parent getting the children's values as below: https://github.com/peterhchen/700-jstree/blob/master/08_PathJSON/0802_PathChild2ParentValueHier.htm

custom jstree JSON data parse into tree

2 Answers2