在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="renderjson.js"></script>

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

2.使用方法

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

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

<!-- Element where the list will be created -->
<div id="container"></div>

<script>
    // The JSObject that you want to render
    var data = { 
        hello: [1, 2, 3, 4], there: { 
            a:1, b:2, c:["hello", null]
        } 
    };

    // Render toggable list in the container element
    document.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 render
    var data = {
    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;
}

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

如果需要, 你只能在以下小提琴中对其进行测试：

编码愉快！