Why I am not able to build tree on JS function call using JSON data

Question

http://jsfiddle.net/2kwkh2uL/5498/

This is a sample code I am trying, to build a jsTree on a javascript function call but for some reason it's not doing it.

If I load it normally it build tree without any issue. Can anyone please let me know what's wrong.

 function build_tree(tree_data) { $('#container').jstree({ 'core': { 'data': tree_data } }); } $("#gen_tree").click(function() { var tree_data = "[{ 'id' : 'cases_root', 'parent' : '#', 'text' : 'Cases [0,1,2]', 'case_id' : '0' },{ 'id' : 'my_cases', 'parent' : 'cases_root', 'text' : 'My Cases', 'case_id' : '0' },{ 'id' : 'active', 'parent' : 'my_cases', 'text' : 'active [0,1,2]', 'case_id' : '0' },{ 'id' : '2', 'parent' : 'active', 'text' : 'AXA Investment Managers [0,1,0]', 'case_id' : '0' },{ 'id' : '107157', 'parent' : '2', 'text' : 'Miani, Antonio [13]', 'case_id' : '107157' },{ 'id' : '98', 'parent' : 'active', 'text' : 'Graff Diamonds [0,0,1]', 'case_id' : '0' },{ 'id' : '106560', 'parent' : '98', 'text' : 'HEE JIN, Gong [18]', 'case_id' : '106560' },{ 'id' : '84', 'parent' : 'active', 'text' : 'Optiver Services BV [0,0,1]', 'case_id' : '0' },{ 'id' : '106608', 'parent' : '84', 'text' : 'SAVILUOTO, Antti [24]', 'case_id' : '106608' },]"; build_tree(tree_data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" /> <script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script> <div id="container"></div> <input id='gen_tree' type='button' value='Generate Tree' /> 

Answer 1

Your issue is because you're giving the data as a string, however it's not valid JSON, and hence cannot be deserialised by the jsTree library.

To fix the problem either correct the JSON format, or even easier, provide the data as an object. Try this:

 function build_tree(tree_data) { $('#container').jstree({ 'core': { 'data': tree_data } }); } $("#gen_tree").click(function() { var tree_data = [{ 'id': 'cases_root', 'parent': '#', 'text': 'Cases [0,1,2]', 'case_id': '0' }, { 'id': 'my_cases', 'parent': 'cases_root', 'text': 'My Cases', 'case_id': '0' }, { 'id': 'active', 'parent': 'my_cases', 'text': 'active [0,1,2]', 'case_id': '0' }, { 'id': '2', 'parent': 'active', 'text': 'AXA Investment Managers [0,1,0]', 'case_id': '0' }, { 'id': '107157', 'parent': '2', 'text': 'Miani, Antonio [13]', 'case_id': '107157' }, { 'id': '98', 'parent': 'active', 'text': 'Graff Diamonds [0,0,1]', 'case_id': '0' }, { 'id': '106560', 'parent': '98', 'text': 'HEE JIN, Gong [18]', 'case_id': '106560' }, { 'id': '84', 'parent': 'active', 'text': 'Optiver Services BV [0,0,1]', 'case_id': '0' }, { 'id': '106608', 'parent': '84', 'text': 'SAVILUOTO, Antti [24]', 'case_id': '106608' }]; build_tree(tree_data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" /> <script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script> <div id="container"></div> <input id='gen_tree' type='button' value='Generate Tree' />