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

本文概述

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

在本文中, 我们想与你分享一个有用的插件, 以使用香草JavaScript或jQuery将JSON / JS对象呈现为Web应用程序中的可折叠树结构。

1.包含renderjson

为了在项目中使用renderjson, 只需下载renderjson脚本的副本或从免费的CDN中引用它即可。然后在文档中包含一个脚本标签：

就是这样, renderjson变量将自动显示在窗口中。有关此库的更多信息, 请不要忘记访问官方的Github存储库和此处的主页。

2.使用方法

如前所述, 窗口中显示的renderjson变量是一个函数, 该函数将要呈现的JS对象作为单个参数, 并返回HTML元素而不是字符串。

因此, 如果你想显示可折叠的香草JavaScript, 则可以使用以下方法进行渲染：

// The JSObject that you want to render

var data = {

hello: [1, 2, 3, 4], there: {