JSON 数据JSON

网络基础

用固定的文字格式传递名称、数值和列表等数据

先知道

JSON 是 API 常用的数据格式，用花括号表示对象、方括号表示数组，还可以包含文字、数字、布尔值和 null。收到数据后仍要检查字段是否存在、类型是否符合预期。

{
  "name": "按钮 Button",
  "price": 0,
  "free": true,
  "tags": ["通用", "表单"]
}

什么时候用

拿到 API 接口 API 返回先整体看结构，再决定取哪层
{ "data": { "list": [ … ] } }先整体看一眼，再一层层取
数组就是同构对象的列表，正好循环渲染成列表 List
[{…}{…}{…}]
同构对象的列表，正好渲染成列表
嵌套就一层层往里取：data.user.name
data→user→name
嵌套就一层层往里取
一长串看不清？贴进格式化工具，缩进一清二楚
{"a":1,"b":[2,3]}→格式化

什么时候不用

键名忘加双引号：JS 行，JSON 不行
{ name: "小林" }键名没加双引号，直接报错
最后一项后面多一个逗号：解析直接报错
[ "a", "b", ]最后一项后面多了个逗号
用单引号包字符串：JSON 只认双引号
{ 'name': '小林' }JSON 只认双引号，单引号不行
当 JS 对象随手写注释：JSON 不支持注释
{ // 注释 "a": 1 }JSON 不支持注释

组成结构 · Anatomy

{
  "tags": ["通用", "表单"]
}

1对象Object一对花括号包起来的整体，描述「一个东西」

2键Key冒号左边的名字，必须双引号

3数组Array方括号包起来的有序列表，渲染列表 List 就靠它

4值Value冒号右边的内容：字符串、数字、布尔、对象、数组

常见变体 · Variants

对象Object

{ "name": "按钮", "price": 0 }

花括号包键值对，描述一个东西

数组Array

[ "通用", "表单", "反馈" ]

方括号包列表，顺序有意义

嵌套Nested

{ "user": { "roles": […] } }

对象套数组，真实数据都这样

典型使用场景

Network 面板看返回

HeadersPreviewResponse

        ▾ data: {…}

        ▾ list: [3]

        ▾ 0: {name: "按钮 Button", price: 0}

        ▾ 1: {name: "输入框 Input", price: 0}

        ▸ 2: {…}

        total: 42

Preview 帮你把 JSON 排成可折叠的树

编辑器里的 data.json

data.json
{
  "site": "Vibe 图鉴",
  "stats": {
    "components": 48,
    "online": true
  },
  "tags": ["通用", "表单"]
}

JSON 校验报错

1  {
2    "name": "按钮",
3    "tags": ["通用",],
4  }

✕ 第 3 行：数组最后一项后面多了逗号

终端 jq 美化输出

$ curl -s https://api.vibeui.dev/user/1 | jq
{
  "id": 1,
  "name": "林小狐",
  "roles": [
    "admin",
    "editor"
  ]
}
# jq 把一坨压缩 JSON 排成带缩进的树