Is there any tree view component support display any arbitrary JavaScript object like:
{
foo: 'bar'
zee: [1, 2, 3]
}
Which result in the following view:
/----foo
| |
| |-- 'bar'
|
|--zee
|
|--
|--1
|--2
|--3
Note the above ascii tree is just for demonstration of the tree structure, not necessarily the final result.
const Tree=(o,m=o,v='')=>{
for(e in o){
if(typeof o!=='object'){console.log(v+'┗╸'+o);return}
Array.isArray(o)?!Array.isArray(o[e])?console.log(v+(o.length===1||o[e]===o[o.length-1]?'┗╸':'┣╸')+o[e]):Tree(o[e],m,v+(o.length===1||o[e]===o[o.length-1]?' '.repeat(o[e].toString.length+1):'┃'+' '.repeat(e.length))):(console.log(v+(e===Object.keys(m)[0]?'┏╸':Object.keys(o).length===1||Object.keys(o)[Object.keys(o).length-1]===e?'┗╸':'┣╸')+e),Tree(typeof o[e]!=='object'?String(o[e]):o[e],m,v+(Object.keys(o).length===1||Object.keys(o)[Object.keys(o).length-1]===e?' '.repeat(e.length+1):'┃'+' '.repeat(e.length))))
}
}
//Usage : Tree(YourObjHere)
//Example :
Tree({
foo: 'bar',
zee: [1, 2, 3]
})
//Let me know if bugsIt's unclear as to your exact need but this might suit you well: http://www.jstree.com/documentation/json_data
console.log(myObj).I found a small library that will display JSON like you want. JSON is pretty much a Javascript object so it should work for you needs (worked for mine).
A very good tree view component package to create a tree structure as exactly you require in the following link. So Visit https://www.npmjs.com/package/treeify
