教程 · 入门

用树视图读复杂 JSON

接口一返回 80 个字段,左右缩进对眼睛不友好。树视图把每一层收成节点:对象是一组命名子节点,数组是下标。这篇只讲怎么读,不讲新语法。

先看根是什么

合法 JSON 的根只能是一个值。日常碰到的几乎都是对象 {...} 或数组 [...]。根是对象,第一层就是业务字段:codedatamessage。根是数组,多半是列表接口或导出文件,第一层只有 012

有人会把分页包在对象里,列表放在 data.list。树上一眼能看出来:先展开 data,再展开 list,不要在根上找订单号。

对象和数组不要混着读

对象的键是名字,顺序在规范里不保证(多数实现会保持写入顺序,但别依赖它写业务)。数组的顺序有意义:第一页第一条就是 [0]

嵌套一深,人容易把「第 3 个地址对象」和「名叫 address 的字段」搞混。树节点上会同时标键名和类型。点进去看详情,确认你改的是那一层,而不是外面套着的包装对象。

{
  "user": {
    "addresses": [
      { "city": "上海", "primary": true },
      { "city": "杭州", "primary": false }
    ]
  }
}

杭州那条的路径是 $.user.addresses[1],不是 $.user.address。键名抄错,后面 JSONPath 全空,见 JSONPath 入门

点节点,抄路径,再决定查还是改

在 HiJSON 里解析之后,点任意节点,右侧详情会给出这一支的值和路径。调试时先抄路径,再决定:

  • 只要看一个字段:用搜索框贴 JSONPath,比手搓展开快。
  • 要改 mock:在详情里改完再复制格式化结果,不要在压缩的单行上找逗号。
  • 要给同事定位:「问题在 $.data.items[2].sku」,比截一张折叠图清楚。

大纲栏:大文件时的目录

层级超过四五层,树会变得很长。中间的大纲相当于目录,按顶层或主要分支跳。导入较大文件时,先别全展开,用大纲跳到 errorsdata,再局部打开。

全展开几千个节点会卡,这是浏览器在画 DOM,不是 JSON 坏了。大文件策略见 大 JSON 怎么读才不卡

列表接口:别一行行对眼睛

数组里每个对象字段差不多时,用多字段对比更合适:

$.data.items[*].{id, status, amount}

会得到一张表。缺字段、类型不一致(有的 amount 是数字有的是字符串)会比较显眼。联调清单接口时,这比展开 50 个节点省事。完整工作流在 API 调试实践

空值怎么读

null、空对象 {}、空数组 []、空字符串 "" 在树上都看得到,含义不同。字段没返回,树上根本没有这个键;字段返回了 null,键在,值是空。前端判空时这两种要分开写。树视图能避免「我以为没这个字段,其实是 null」这种扯皮。

操作顺序(我自己用的)

  1. 粘贴或拖文件,Ctrl+Enter 解析。
  2. 看根类型,展开到业务那一层就停。
  3. 点可疑节点,复制路径。
  4. 需要扫列表就上对比语法;需要搜深层未知位置,用 $..field
  5. 确认没问题再格式化拷回编辑器。敏感数据不要点分享,见 安全注意

常见问题

树上数字显示成了科学计数?
超大整数在 JS 里会丢精度,树只是把解析后的值画出来。订单号、雪花 ID 应在接口里用字符串。语法没问题也会「看起来变了」。
点了节点但路径和我想的不一样?
中间是否隔着一层 dataresult。把完整路径整段复制,不要凭记忆手打。

相关教程

打开树视图

粘贴 JSON 后解析,从中间大纲跳到你关心的分支。

打开 HiJSON →