JSON 可视化

原始 JSON 是为机器设计的，而真实的 API 响应里，一个有用的值可能埋在三层、五层之下。JSON 可视化器能把任意数据变成可交互、可折叠的树，或一张扁平、可滚动的表格，并同时报告结构统计。它只接受标准 JSON，且完全在浏览器中运行，这让你在摸清陌生 API 响应或导出的配置文件时，可以方便地粘贴进来。

树视图与表格视图

树视图保留层级。对象和数组变成可展开的分支，标注其类型和子项数量，点击分支即可折叠或展开。当你还不了解数据结构时，应该用这个视图，因为它如实呈现嵌套。

表格视图把同一份数据扁平化为「键路径、值、类型」的行。它舍弃形状，换来一份可以自上而下直读的清单。当你大致知道要找什么、需要比较许多值时，或者想跨记录检查 null 和类型不匹配时，它是更好的选择。

统计在每次解析时计算一次，切换视图时保持不变。

如何可视化一份数据

1. 把 JSON 粘贴进输入框并按「可视化」，或者如果面板已打开就直接粘贴并点击按钮。
2. 如果文本解析成功，结果面板会出现，默认选中树视图。
3. 展开你关心的分支，或切换到表格视图查看扁平列表。
4. 读取右上角的统计行：最大深度、键数量和类型分布。
5. 源数据一旦变化，重新粘贴并再次可视化。

不会向服务器发送任何内容。解析、扁平化和渲染都在页面内完成，因此内部或敏感的载荷永远不会离开你的机器。

解读统计面板

• 最大深度 是最深的嵌套层级，用来标记比预期更分层的结构。
• 键数量 统计对象键加数组索引，粗略反映载荷规模。
• 类型分布 统计有多少叶子是字符串、数字、布尔值或 null，以及数组和对象各有多少。一个本应存放字符串的字段突然出现一连串 null，就是上游改动破坏了数据的明显信号。

实操示例

取这段输入：

{
  "user": { "id": 7, "admin": false, "tags": ["a", "b"] },
  "lastLogin": null
}

树视图把 user 显示为带三个键的对象，其中 tags 是 Array[2]，可展开为 "a" 和 "b"，lastLogin 为 null。

表格视图产生五行：

键路径	值	类型
user.id	7	number
user.admin	false	boolean
user.tags.0	a	string
user.tags.1	b	string
lastLogin	null	null

统计显示最大深度 3、键数量 7，类型分布为 number: 1、boolean: 1、string: 2、null: 1。键数量为七，计入了 user、id、admin、tags、两个数组索引以及 lastLogin。

仅接受标准 JSON

解析器是 JSON.parse，非常严格。它拒绝单引号、不带引号的属性名、尾随逗号、注释，以及仅 JavaScript 才有的值 NaN、Infinity 和 undefined。带前导加号或前导零（0 本身除外）的数字也无效。如果文档失败，错误信息会报告第一个问题的位置，这通常是找出某个原本看不见的尾随逗号的最快方式。先让文本过一遍格式化器，往往能在它到达本工具之前就修好问题。

何时该换其他工具

可视化器用于理解形状，而非编辑或比较。一旦你知道载荷里有什么，其他工具能更好地完成下一步工作。

• 需要统一缩进或快速修复语法时，用格式化器。
• 有两份同一文档、需要看清环境之间哪些字段发生了变化时，用对比工具。
• 结构足够扁平、可以载入电子表格时，用 JSON 转 CSV 转换器。
• 想把一份有代表性的响应变成可据以校验的契约时，用 schema 生成器。

统计面板是一个自然的中转点：记下最大深度，以及任何出现意外 null 或错误类型的字段，然后换工具去修复或校验它们。在另一个标签页里工作时让载荷留在可视化器中，也意味着你永远不会看不到原始结构。

大数据与实用限制

查看器把数据保存在内存中并据此构建显示，因此几兆字节很轻松，几十兆字节则不行。树视图更重，因为每个容器都会变成一个可点击元素；表格视图更轻，但仍要为每个叶子值渲染一行。结果区高度上限为 600 像素并可滚动，这保持了页面可用，但也意味着你只能靠肉眼查找，而不是用过滤框。对于非常大的文件，提取一个有代表性的对象或数组，检查那一小片。

相关工具

• JSON 格式化器
• JSON 对比工具
• JSON 转 CSV
• JSON Schema 生成器