免费转换器

JSON 树形 查看器

在交互式可折叠树中查看、格式化和探索JSON数据。免费、安全、无需上传。

拖放JSON文件到此处

或在下方粘贴JSON文本

关于此工具

JSON 树查看器将 JSON 数据显示为可导航的分层树而不是纯文本。每个对象都成为一个可折叠的分支;数组单独显示它们的项目;原始值显示为叶子。结构视图可以轻松地在深层嵌套数据中查找特定字段、折叠不相关的子树以及导航作为平面文本难以管理的大型 JSON 文档。

与格式化的 JSON 文本相比,树视图更擅长在大数据中导航。 10MB 的 API 响应作为文本滚动是不切实际的,但作为树很容易处理,您可以折叠不关心的顶级键并仅展开感兴趣的部分。

该查看器在浏览器中以结构化树的形式呈现 JSON。搜索按键或值过滤分支。类型感知显示可区分字符串、数字、布尔值、null、对象和数组。

为什么使用 JSON 树查看器

深度嵌套的数据很难以文本形式导航。配置文件、API 响应和序列化状态通常具有 5 层以上的嵌套。树视图可让您折叠不相关的级别并专注于重要的事情;文本视图需要仔细滚动和计算括号。

搜索和过滤功能也很重要。使用搜索感知查看器可以快速查找复杂文档中名为“user_id”的所有键;无法用纯文本可靠地完成。

使用方法

粘贴 JSON,导航树。

  1. 粘贴您的 JSON: 将 JSON 放入输入区域。查看器解析并呈现结构化树。
  2. 展开和折叠: 单击分支可展开或折叠。对于关注大数据的特定子树很有用。
  3. 搜索: 按键或值过滤。匹配的分支保持可见;不匹配的被隐藏。
  4. 检查具体值: 单击叶子查看其完整值(对于长字符串有用)并复制路径(例如 users.0.profile.email)以在代码中使用。

常见用例

技术细节

JSON 解析使用 JSON.parse,它会在无效输入时失败,并出现指向问题位置的解析错误。有效的 JSON 呈现为 JavaScript 对象,查看器递归地生成树。

渲染:每一层嵌套都成为一个缩进的分支。对象键是标签;值根据类型呈现 - 带引号的字符串、不带引号的数字、布尔值作为真/假、显式为 null、对象和数组作为可折叠分支。

性能:非常大的 JSON (10MB+) 会减慢渲染速度。延迟扩展(仅渲染当前可见的分支)会有所帮助。搜索大型文档可能会花费大量时间;在第一次解析时对树建立索引会有所帮助。

最佳实践

常见问题

JSON 树可以有多深?
没有人为的深度限制。该工具会渲染与 JSON 结构一样深的树。但是,极深的嵌套(100 多个级别)可能会减慢浏览器中的渲染速度。
我可以在 JSON 树中搜索吗?
使用 Ctrl/Cmd+F 搜索键或值。匹配的节点将突出显示,并且其父节点会自动展开以显示路径。
使用什么 JSON 路径格式?
该工具使用 JSONPath 点表示法 ($.key.nested.array[0].value)。此格式与 JavaScript 属性访问和大多数 JSONPath 库兼容。
我可以编辑树中的值吗?
这是一个用于探索的只读查看器。要编辑 JSON,请使用我们的 JSON Formatter 工具,该工具提供带验证的可编辑界面。
我的数据上传了吗?
不会。解析和渲染发生在您的浏览器中。
如何导出树的一部分?
大多数查看器为选定的分支提供 JSON 格式的复制。导出的值与仅具有选定键的结构相同。
为什么数据量大时树会变慢?
许多节点的 DOM 渲染成本很高。延迟扩展(仅渲染可见分支)有帮助;对于非常大的数据,专用工具(jq、code)效率更高。
我可以从 URL 查看 JSON 吗?
有些查看器直接获取 URL。其他的需要粘贴。 CORS 可能会阻止某些 URL 的跨源获取。