jsTree JSON issue [closed]

Question

I am working on some project module where i am using jstree.js plugin. I am getting following JSON via web service call:

[
    {
        "name":"Folder1",
        "attributes": {
            "SubFolder1-1":"value1-1",
            "SubFolder1-2":"value1-2",
            ...
            "SubFolder1.7":"value1-7",
            "SubFolder1.8":"value1-8"
        }
    }, {
        "name":"Folder2",
        "attributes": {
            "SubFolder2-1":"value2-1"
        }
    }, {
        "name":"Folder3",
        "attributes": {
            "SubFolder3-1":"value2-1"
            }
    } 
]

But jsTree.js is not accepting the JSON format, It accept following format:

{
    "data" : "node_title",
    "attr" : { 
          "id" : "node_identificator", 
          "some-other-attribute" : "attribute_value" 
    },
    "children" : [ /* an array of child nodes objects */ ]
}

Our approach:

var new_avatar = new Array();
new_avatar = data.attributeSets;

// Hardcoded data for JSTree
var dirn = {};
var final_child = {};
dirn = "[";

final_child = "[";
for (var info in new_avatar) {
    for (var detailInfo in new_avatar[info].attributes) {
        ckey = detailInfo; // Key
        cval = new_avatar[info].attributes[detailInfo]; // Key => Value
        final_child += '{ "data": "' + ckey + '",';
        final_child += ' "attr": { "rel":"directory" },';
        final_child += ' "children": [ "' + cval + '" ] },';
    }
}

final_child = final_child.substring(0, final_child.length - 1);     //removing last comma so it would be a valid JSON
final_child += " ] ";   //final close to this JSON

for (var info in new_avatar) {
    dirn += '{ "data": "' + new_avatar[info].name + '" ,';
    dirn += ' "attr": { "rel":"directory" }, ';
    dirn += ' "children": ' + final_child + " }, ";     
    // Putting final_child in so it will build level 2 + level 3 (level 3 child is just value declared in final_child children above)
}

dirn = dirn.substring(0, dirn.length - 2);      // removing whitespace + comma 
dirn += " ] ";  // this is main tree data var end box

dirn = $.parseJSON(dirn);   // parse the whole dirn variable so it would be an array and ready to feed to jstree.

$("#tree2").jstree({
 plugins: ['themes', 'json_data', "ui"],
 json_data: {

     "data": dirn,   

     },
 themes: {
     theme: 'default'
 },
 checkbox: {
     real_checkboxes: true,
     two_state: true
 },
 "types": {
     "types": {
         "disabled": {
             "check_node": false,
             "uncheck_node": false
         },
         "directory": {
             "check_node": false,
             "uncheck_node": false
         }
     }
 }
});

Current Output:

Showing error that json is not valid string.

Expected Output:

Answer 1

I got the solution and is working fine now. Thanks you all for showing interest.

var new_avatar = new Array();
new_avatar = data.attributeSets;

var dirn = {};
var final_child = {};
var nodeChildren = {};

//Collect children for each node
for (var info in new_avatar) {

final_child = "[";
for (var detailInfo in new_avatar[info].attributes) {
    ckey = detailInfo; // Key
    cval = new_avatar[info].attributes[detailInfo]; // Key => Value
    final_child += '{ "data": "' + ckey + '",';
    final_child += ' "attr": { "rel":"directory" },';
    final_child += ' "children": [ "' + cval + '" ] },';
}
final_child = final_child.substring(0, final_child.length - 1);     //removing last comma so it would be a valid JSON
final_child += " ] ";   //final close to this JSON
nodeChildren[info] = final_child;
}

    // Attached collected nodes to respective parents
    dirn = "[";
    for (var info in new_avatar) {
        dirn += '{ "data": "' + new_avatar[info].name + '" ,';
        dirn += ' "attr": { "rel":"directory" }, ';
        dirn += ' "children": ' + nodeChildren[info] + " }, ";     //putting final_child in so it will buld level 2 + level 3 (level 3 child is just value declared in final_child children above)
    }
    dirn = dirn.substring(0, dirn.length - 2);      
    dirn += " ] ";  

    dirn = $.parseJSON(dirn);   

$("#tree2").jstree({
    plugins: ['themes', 'json_data', "ui", "dnd"],
    json_data: {

     "data": dirn,   

     },
    themes: {
     theme: 'default'
    },
    checkbox: {
     real_checkboxes: true,
     two_state: true
    },
    "types": {
     "types": {
         "disabled": {
             "check_node": false,
             "uncheck_node": false
         },
         "directory": {
             "check_node": false,
             "uncheck_node": false
         }
     }
    }
});