后端

JSON

你可能会说

AI 返回给我的那种大括号套小括号的数据，怎么读、怎么写？

JSON 是软件之间传递成组信息时常用的一种文本写法。例如天气服务可以把城市、温度和天气状态按 JSON 格式发给页面，页面再把对应内容显示出来。它能把文字、数字、列表和真假状态放在一起；收到后仍要检查内容是否齐全、是否正确。

也常被叫作JSON 数据JavaScript Object Notation

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

组成结构 · Anatomy

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

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

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

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

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

常见变体 · 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": "BuildHub 图鉴",
  "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 格式化为带缩进的结构