Skip to content

Instantly share code, notes, and snippets.

@Hugobox

Hugobox/README.md Secret

Last active February 15, 2022 03:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hugobox/ede5ae392f1f06134ee734e1041c79aa to your computer and use it in GitHub Desktop.
Save Hugobox/ede5ae392f1f06134ee734e1041c79aa to your computer and use it in GitHub Desktop.
Download ZIP
JSON2tree-ui
Raw
README.md

This is a ui-template flow that uses the jstree library (https://www.jstree.com/) to create interactive trees from arbitrary JSON.

Raw
flow.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
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment