如何在HTML中创建通用JSON数据的树表示?

时间:2011-11-11 13:36:40

标签: javascript json jstree mongovue

我有一些以JSON格式存储的数据。我希望能够以类似于MongoVUE呈现mondodb文档的方式在浏览器中将其显示为动态树结构: Screenshot

我找到了一个非常好的jquery插件,名为jsTree。不幸的是,为了处理JSON文档,它要求数据具有非常特定的冗长(在我看来是冗余的)结构:link。使用它意味着我的json文档的重大修改。我正在寻找一种能够自动构建树的工具,而不需要对数据进行严格的手动调整,但如果需要的话,允许我对视图进行一些修改。

json.bloople.net上的工具使用表格做了类似的事情,但因为我有几个级别的嵌套文档,所以输出看起来非常臃肿。而且,该结构不是动态可折叠的。

我很感激有关正确工具的任何提示,包括那些可能需要(自动化!)预处理Java / Groovy中的JSON数据或基于纯JavaScript的解决方案。

1 个答案:

答案 0 :(得分:0)

这只是一个简单的例子,说明如何在html中输出JSON结构之类的树。 http://jsfiddle.net/K2ZQQ/1/(有关空白区域的浏览器支持,请参阅here)。请注意,JSON.stringify的第二个参数是replacer函数:

来自http://msdn.microsoft.com/en-us/library/ie/cc836459(v=vs.94).aspx

  

如果replacer是一个函数,JSON.stringify会调用函数,传递   在每个成员的关键和价值。而是使用返回值   原始价值。如果函数返回undefined,则为成员   被排除在外。根对象的键是一个空字符串:“”。

因此,如果您需要对JSON树的dislpay添加任何进一步修改,replacer功能可能会有所帮助。