Question

是否有任何树视图组件支持显示任意JavaScript对象，如：

{
   foo: 'bar'
   zee: [1, 2, 3]
}

以下视图中的结果如下：

/----foo 
  |   |
  |   |-- 'bar'
  |
  |--zee
      |
      |--
        |--1
        |--2
        |--3

注意上面的ascii树仅用于演示树结构，不一定是最终结果。

Answer 1

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 bugs

Answer 2

目前还不清楚您的确切需求，但这可能很适合您：http://www.jstree.com/documentation/json_data

Answer 3

我找到了一个可以显示JSON的小型库。 JSON几乎是一个Javascript对象，所以它应该适合你的需要（为我的工作）。

https://github.com/lmenezes/json-tree

Answer 4

一个非常好的树视图组件包，可以按照以下链接中的确切要求创建树结构。因此，请访问https://www.npmjs.com/package/treeify

在树视图中显示JavaScript对象

4 个答案: