JSON2tree-ui
This is a ui-template flow that uses the jstree library (https://www.jstree.com/) to create interactive trees from arbitrary JSON.
[{"id":"c77f44f94f19fb09","type":"ui_template","z":"4644f093f20e9e40","group":"8b3784e33ba42593","name":"JSON2tree","order":3,"width":"6","height":"6","format":"<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css\" />\n</head>\n<body>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js\"></script>\n <div id=\"tree\"><div id=\"jstree\"></div></div>\n <script>\n \n function jsonToJsTreeObject( json_data_object, final_array = new Array() )\n {\n Object.keys(json_data_object).forEach( function( data ) {\n // console.log(\"Key:\" + data);\n if( Array.isArray(json_data_object[data]) || json_data_object[data] instanceof Object )\n {\n final_array.push( { text: `${data}`, children: jsonToJsTreeObject( json_data_object[data], new Array() ) } );\n // using state attribute \n // final_array.push( { text: `${data}`, state : { 'opened' : false, 'selected' : false }, children: jsonToJsTreeObject( json_data_object[data], new Array() ) } );\n }\n else\n {\n final_array.push( { text: `${data}`, children: [{ text: `${json_data_object[data]}` }] } );\n // using state attribute\n // final_array.push( { text: `${data}`, state : { 'opened' : false, 'selected' : false }, children: [{ text: `${json_data_object[data]}` }] } );\n }\n });\n\n return final_array;\n }\n \n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n $('#jstree').remove()\n let myjsonObject = msg.payload\n let div = document.createElement('div')\n div.setAttribute(\"id\", \"jstree\")\n let treediv = document.getElementById(\"tree\")\n treediv.appendChild(div)\n $('#jstree').jstree({ 'core' : {\n 'data' : jsonToJsTreeObject( myjsonObject )\n } });\n $('#jstree').on(\"changed.jstree\", function (e, data) {\n let path = $('#jstree').jstree(true).get_path(data.node,\"/\");\n console.log(path);\n msg.output = path\n scope.send(msg)\n });\n }\n });\n})(scope);\n\n</script>\n</body>\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":790,"y":120,"wires":[["8d8c29c9e4047092"]]},{"id":"8d8c29c9e4047092","type":"debug","z":"4644f093f20e9e40","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":950,"y":120,"wires":[]},{"id":"5311e09880914790","type":"inject","z":"4644f093f20e9e40","name":"JSON","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{ \"glossary\": { \"title\": \"example glossary\", \t\t\"GlossDiv\": { \"title\": \"S\", \t\t\t\"GlossList\": { \"GlossEntry\": { \"ID\": \"SGML\", \t\t\t\t\t\"SortAs\": \"SGML\", \t\t\t\t\t\"GlossTerm\": \"Standard Generalized Markup Language\", \t\t\t\t\t\"Acronym\": \"SGML\", \t\t\t\t\t\"Abbrev\": \"ISO 8879:1986\", \t\t\t\t\t\"GlossDef\": { \"para\": \"A meta-markup language, used to create markup languages such as DocBook.\", \t\t\t\t\t\t\"GlossSeeAlso\": [\"GML\", \"XML\"] }, \t\t\t\t\t\"GlossSee\": \"markup\" } } } } }","payloadType":"json","x":610,"y":120,"wires":[["c77f44f94f19fb09"]]},{"id":"49c7befd02b97aaa","type":"inject","z":"4644f093f20e9e40","name":"JSON","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"name\":\"John\",\"age\":30,\"car\":null}","payloadType":"json","x":610,"y":160,"wires":[["c77f44f94f19fb09"]]},{"id":"8b3784e33ba42593","type":"ui_group","name":"JSON2tree","tab":"422e1ae50d899723","order":2,"disp":true,"width":"6","collapse":false},{"id":"422e1ae50d899723","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
