在JavaScript中从JSON创建可折叠树结构到HTML

本文概述

1.包含renderjson
2.使用方法

如果你使用的工具可以帮助其他开发人员调试应用程序, 则可能会知道以图形方式查看JavaScript中数组或对象的结构有多有用。通常, 这可以在控制台上完成, 但是, 如果你在应用程序内部使用工具, 则可以依靠HTML来创建这种结构。幸运的是, 已经有一个用香草js编写的JavaScript库, 可以帮助你将JavaScript对象呈现为可折叠的树结构。我们正在谈论renderjson。 Render JSON是一个插件, 可让你将JavaScript对象显示到可折叠且主题化的HTML可切换列表中。该库的目标是非常简单, 几乎没有选项, 并且没有外部依赖性。它旨在调试, 但是你可以在有用的地方使用它。该代码延迟地呈现JSON, 仅当用户通过单击公开图标来显示JSON时才构建HTML。这使得对巨大的JSON对象进行初始呈现变得非常快, 因为最初呈现的唯一内容是单个公开图标。
在本文中, 我们想与你分享一个有用的插件, 以使用香草JavaScript或jQuery将JSON / JS对象呈现为Web应用程序中的可折叠树结构。
1.包含renderjson 为了在项目中使用renderjson, 只需下载renderjson脚本的副本或从免费的CDN中引用它即可。然后在文档中包含一个脚本标签：

< !-- Include from a free CDN --> < script src="https://cdn.rawgit.com/caldwell/renderjson/master/renderjson.js"> < /script> < !-- Or a local copy --> < script src="http://www.srcmini.com/renderjson.js"> < /script>

就是这样, renderjson变量将自动显示在窗口中。有关此库的更多信息, 请不要忘记访问官方的Github存储库和此处的主页。
2.使用方法 【在JavaScript中从JSON创建可折叠树结构到HTML】如前所述, 窗口中显示的renderjson变量是一个函数, 该函数将要呈现的JS对象作为单个参数, 并返回HTML元素而不是字符串。
因此, 如果你想显示可折叠的香草JavaScript, 则可以使用以下方法进行渲染：

< !-- Element where the list will be created --> < div id="container"> < /div> < script> // The JSObject that you want to rendervar data = http://www.srcmini.com/{ hello: [1, 2, 3, 4], there: { a:1, b:2, c:["hello", null]} }; // Render toggable list in the container elementdocument.getElementById("container").appendChild(renderjson(data)); < /script>

或者, 如果你更喜欢jQuery, 则：

< !-- Element where the list will be created --> < < div id="container"> < /div> < script> // The JSObject that you want to rendervar data = http://www.srcmini.com/{hello: [1, 2, 3, 4], there: { a:1, b:2, c:["hello", null]} }; $("#container").append($(renderjson(data))); < /script>

这将呈现一个没有样式但可完全起作用的可切换列表：

文章图片
但是, 这很无聊吗？尽管你可以单击并切换列??表中的项目, 但它需要颜色。 Renderjson列表中不包含任何CSS, 因此由你来定义样式。我们将使用以下规则用颜色和深色背景渲染可折叠结构：

#container { text-shadow: none; background: #303030; padding: 1em; }.renderjson a { text-decoration: none; }.renderjson .disclosure { color: crimson; font-size: 150%; }.renderjson .syntax { color: grey; }.renderjson .string { color: red; }.renderjson .number { color: cyan; }.renderjson .boolean { color: plum; }.renderjson .key { color: lightblue; }.renderjson .keyword { color: lightgoldenrodyellow; }.renderjson .object.syntax { color: lightseagreen; }.renderjson .array.syntax { color: lightsalmon; }

因此, 该结构的输出现在为：