JSTree does not render my JSON data from JS variable

Question

I have a javascript JSON variable and I'm trying to feed it to the JSTree. It is not rendering anything.

{  
   "id":1,
   "data":"GDC",
   "depth":-1,
   "children":[  
      {  
         "id":2,
         "data":"SICS",
         "depth":0,
         "children":[  
            {  
               "id":5,
               "data":"Collaboration",
               "depth":1,
               "children":[  
                  {  
                     "id":10,
                     "data":"Contact Center",
                     "depth":2,
                     "children":[  
                        {  
                           "id":607,
                           "data":"Subscription",
                           "depth":3,
                           "children":[  
                              {  
                                 "depth":4,
                                 "id":608,
                                 "children":[  

                                 ],
                                 "data":"Optimization"
                              }
                           ]
                        },
                        {  
                           "id":606,
                           "data":"Transaction",
                           "depth":3,
                           "children":[  
                              {  
                                 "depth":4,
                                 "id":664,
                                 "children":[  

                                 ],
                                 "data":"Planning"
                              },

                              {  
                                 "depth":4,
                                 "id":672,
                                 "children":[],

                              }
                           ]
                        }
                     ]
                  },
                  {  
                     "id":11,
                     "data":"Productivity",
                     "depth":2,
                     "children":[  
                        {  
                           "id":1231,
                           "data":"DevOps",
                           "depth":3,
                           "children":[  
                              {  
                                 "depth":4,
                                 "id":1280,
                                 "children":[  

                                 ],
                                 "data":"Deployment"
                              }
                           ]
                        },
                        {  
                           "id":1229,
                           "data":"Tool Support",
                           "depth":3,
                           "children":[  
                              {  
                                 "depth":4,
                                 "id":1232,
                                 "children":[  

                                 ],
                                 "data":"UCDT"
                              },

                              {  
                                 "depth":4,
                                 "id":1237,
                                 "children":[  

                                 ],
                                 "data":"PCAT"
                              }
                           ]
                        }
                     ]
                  }
               ]
            },
            {  
               "id":3,
               "data":"Security ",
               "depth":1,
               "children":[  
                  {  
                     "id":284,
                     "data":"Security",
                     "depth":2,
                     "children":[  
                        {  
                           "id":1286,
                           "data":"Subscription",
                           "depth":3,
                           "children":[  
                              {  
                                 "depth":4,
                                 "id":1491,
                                 "children":[  

                                 ],
                                 "data":"Software Strategy"
                              },
                              {  
                                 "depth":4,
                                 "id":1496,
                                 "children":[  

                                 ],
                                 "data":"Change Support/Migration"
                              }
                           ]
                        },
                        {  
                           "id":1285,
                           "data":"Transaction",
                           "depth":3,
                           "children":[  
                              {  
                                 "depth":4,
                                 "id":1287,
                                 "children":[  

                                 ],
                                 "data":"CRD"
                              },
                              {  
                                 "depth":4,
                                 "id":1290,
                                 "children":[  

                                 ],
                                 "data":"NIP"
                              }

                           ]
                        }
                     ]
                  }
               ]
            }
         ]
      }
   ]
}

Ive feeded this data into JSTree but its not rendering anything. I've tried using a basic JSON data, but it takes that. When I have nested children it seems to fail.

th JS code is :

$(function () {
$('#jstree').jstree({
    'json_data' : {
        'data' : data
    }
});
});

Any ideas?

Answer 1

Below is your updated json(change your "data" to "text" property):

var data = {
        "id": 1,
        "text": "GDC",
        "depth": -1,
        "children": [
           {
               "id": 2,
               "text": "SICS",
               "depth": 0,
               "children": [
                  {
                      "id": 5,
                      "text": "Collaboration",
                      "depth": 1,
                      "children": [
                         {
                             "id": 10,
                             "text": "Contact Center",
                             "depth": 2,
                             "children": [
                                {
                                    "id": 607,
                                    "text": "Subscription",
                                    "depth": 3,
                                    "children": [
                                       {
                                           "depth": 4,
                                           "id": 608,
                                           "children": [

                                           ],
                                           "text": "Optimization"
                                       }
                                    ]
                                },
                                {
                                    "id": 606,
                                    "text": "Transaction",
                                    "depth": 3,
                                    "children": [
                                       {
                                           "depth": 4,
                                           "id": 664,
                                           "children": [

                                           ],
                                           "text": "Planning"
                                       },

                                       {
                                           "depth": 4,
                                           "id": 672,
                                           "children": [],

                                       }
                                    ]
                                }
                             ]
                         },
                         {
                             "id": 11,
                             "text": "Productivity",
                             "depth": 2,
                             "children": [
                                {
                                    "id": 1231,
                                    "text": "DevOps",
                                    "depth": 3,
                                    "children": [
                                       {
                                           "depth": 4,
                                           "id": 1280,
                                           "children": [

                                           ],
                                           "text": "Deployment"
                                       }
                                    ]
                                },
                                {
                                    "id": 1229,
                                    "text": "Tool Support",
                                    "depth": 3,
                                    "children": [
                                       {
                                           "depth": 4,
                                           "id": 1232,
                                           "children": [

                                           ],
                                           "text": "UCDT"
                                       },

                                       {
                                           "depth": 4,
                                           "id": 1237,
                                           "children": [

                                           ],
                                           "text": "PCAT"
                                       }
                                    ]
                                }
                             ]
                         }
                      ]
                  },
                  {
                      "id": 3,
                      "text": "Security ",
                      "depth": 1,
                      "children": [
                         {
                             "id": 284,
                             "text": "Security",
                             "depth": 2,
                             "children": [
                                {
                                    "id": 1286,
                                    "text": "Subscription",
                                    "depth": 3,
                                    "children": [
                                       {
                                           "depth": 4,
                                           "id": 1491,
                                           "children": [

                                           ],
                                           "text": "Software Strategy"
                                       },
                                       {
                                           "depth": 4,
                                           "id": 1496,
                                           "children": [

                                           ],
                                           "text": "Change Support/Migration"
                                       }
                                    ]
                                },
                                {
                                    "id": 1285,
                                    "text": "Transaction",
                                    "depth": 3,
                                    "children": [
                                       {
                                           "depth": 4,
                                           "id": 1287,
                                           "children": [

                                           ],
                                           "text": "CRD"
                                       },
                                       {
                                           "depth": 4,
                                           "id": 1290,
                                           "children": [

                                           ],
                                           "text": "NIP"
                                       }

                                    ]
                                }
                             ]
                         }
                      ]
                  }
               ]
           }
        ]
    }

And below is correct js code:

$('#jstree').jstree({
        'core': {
            'data': data
        }
    });