面对上千行嵌套 JSON,在文本编辑器里上下滚动找数据犹如大海捞针。你需要一种直观的方式来理解数据结构、定位特定字段。
Suried Tools 的 JSON 树形视图将 JSON 数据渲染为可交互的树状结构,支持逐层展开、搜索过滤、路径复制,让你像浏览文件夹一样探索复杂数据。
01 逐层展开与折叠节点
树形视图默认展开第一层节点,让你快速了解数据的顶级结构。点击任意对象或数组节点前的箭头图标即可展开或折叠该节点。
工具还支持"全部展开"和"全部折叠"操作。你也可以指定展开到第 N 层——比如只展开前 3 层,快速了解整体结构而不被细节淹没。
双击节点可以快速切换展开/折叠状态,比单击箭头更快捷。
02 复制 JSON 路径
在树形视图中,右键点击或悬停任意节点会显示该节点的完整 JSON 路径(如 response.data.users[0].email),一键复制到剪贴板。
这个功能在开发 API 数据处理逻辑时极为实用——你可以直接将路径粘贴到代码中,精确引用嵌套数据。支持点号表示法(dot notation)和方括号表示法(bracket notation)两种格式。
03 在大型 JSON 中搜索
树形视图内置搜索功能,支持按键名或值进行过滤。输入搜索词后,树会自动折叠不相关的分支,只展示匹配路径。
搜索支持精确匹配和模糊匹配两种模式。对于数值和布尔值,也可以按类型过滤——比如只显示所有值为 null 的节点,帮助排查数据缺失问题。
使用快捷键 Ctrl+F(或 Cmd+F)可以在树形视图中快速激活搜索框。
04 节点数据类型标注
树形视图中每个节点旁边都会显示其数据类型标签——Object、Array、String、Number、Boolean、Null。对象和数组还会显示子元素数量。
不同数据类型用不同颜色标识:字符串为绿色、数字为蓝色、布尔值为橙色、null 为灰色,让你快速区分数据性质。
常见问题
树形视图中的 JSON 数据可以编辑吗?
树形视图目前是只读浏览模式。要修改数据,请切换回文本编辑器视图进行编辑,修改会实时同步到树形视图。
树形视图对性能有要求吗?会不会卡顿?
树形视图使用虚拟滚动技术,只渲染当前可视区域的节点,即使面对数万行的 JSON 也不会卡顿。大型数据集建议先折叠到前几层再按需展开。
复制的 JSON 路径可以直接在 JavaScript 中使用吗?
可以。复制的路径默认使用 JavaScript 风格的点号/方括号表示法,可以直接作为对象属性链在代码中使用(配合可选链操作符效果更佳)。
树形视图能显示 JSON 数组的索引吗?
是的。数组中的每个元素都会显示其索引号(如 [0]、[1]、[2]),并且索引会包含在复制的 JSON 路径中。
如何在树形视图和文本视图之间切换?
使用工具栏上的切换按钮即可在树形视图和文本编辑视图之间来回切换。数据状态在切换过程中完全保持同步。