跳转到主要内容
CuteJSON
↑↓ 导航 Enter 选择 Esc 关闭

如何以树形视图探索大型JSON文档

发布 1 分钟阅读 作者 Akash Kinkar Pandey

超过几层深的API响应或配置文件作为原始文本很难阅读。计算花括号找到数组在哪里结束,或者滚动上千行找到一个键,不是任何人想花时间的方式。

使用JSON查看器

粘贴文档,树会在你停止输入时自动绘制。每个对象和数组都是可以打开和关闭的披露项,全部展开或全部折叠会对整个文档同时执行。点击叶值会选择它,在编辑器窗格中高亮其确切的源文本,并在树上方显示其路径,准备好用一个按钮复制。

粘贴

{"data":{"items":[{"name":"first"},{"name":"second"}]},"id":12345678901234567890}

点击第二个项目的name显示$.data.items[1].name作为路径。这是一个真实的JSONPath表达式,如果你需要查询该形状的每个匹配项,可以直接粘贴到JSONPath测试器中。

为什么大型文档不会冻结标签页

预先渲染每一行的树是其他查看器在大型文档上挂起的原因:无论解析多快,布局一万个DOM节点都需要实际时间。此查看器只在你打开分支时绘制,因此关闭的容器没有成本。全部展开仍然需要绘制所有内容,所以超过3000个值它会拒绝并告诉你计数而不是锁定标签页,你仍然可以在该点之后单独打开分支。

你实际看到的是什么

树是从格式化器重新打印的同一令牌流构建的,而不是从JSON.parse解析的值。二十位整数在树中保留每个数字,看起来像数字的对象键保持在你编写它的位置,就像此站点上的每个其他工具一样。树显示你的文档,不是JavaScript的解释。

回答“这个值在哪里”的快速方法

如果你曾经在一个JSON文件中grep一个值,只找到三个匹配项且无法分辨哪个在哪个对象内部,这就是更快的路径:打开树,点击值,读取路径。它也可以反向工作。在树中选择一个值会滚动到并高亮编辑器中其确切的源文本,这是在你自己没有编写的文档中查找特定字段的最快方式。

返回所有文章