Developer Tools

JSON 与数据工具:无需编写代码即可格式化、验证、转换和查询 JSON

浏览器端 JSON 工具完整指南——格式化与验证 JSON、生成 TypeScript 接口、转换为 CSV 或 SQL、构建 Zod schema、比较 JSON 差异,以及运行 JSONPath 查询。

7分钟阅读

代码编辑器显示 JSON 数据结构

JSON 是 API、配置文件、数据库和数据交换的通用语言。开发者每天都要与它打交道——需要不断地格式化、验证、转换,或从中提取信息。本文是一份完整指南,涵盖处理所有常见 JSON 任务的工具,全部直接在浏览器中运行。

1. JSON 格式化与验证工具

最常见的 JSON 任务:粘贴一段压缩过的或原始的 API 响应,然后需要读懂它。

我们的 JSON Formatter 具备三项功能:

美化输出:{"name":"Alice","age":30,"scores":[98,87,91]} 格式化为:

{
  "name": "Alice",
  "age": 30,
  "scores": [98, 87, 91]
}

验证: 即时标记语法错误,并精确指出所在行和位置。常见错误检测包括:

  • 尾随逗号(JS 对象中允许,但在 JSON 中无效)
  • 单引号替代双引号
  • 未加引号的键名
  • 字段间缺少逗号
  • 括号不匹配

压缩: 将格式化后的 JSON 压缩回单行,用于 API 请求或存储。


2. JSON 转 TypeScript:自动生成接口

手动从大型 API 响应中编写 TypeScript 接口既繁琐又容易出错。我们的 JSON to TypeScript 转换器可自动生成。

输入:

{
  "user": {
    "id": 1,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": ["admin", "editor"],
    "metadata": {
      "createdAt": "2024-01-15T10:00:00Z",
      "active": true
    }
  }
}

输出:

interface Metadata {
  createdAt: string;
  active: boolean;
}

interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
  metadata: Metadata;
}

interface Root {
  user: User;
}

该转换器支持嵌套对象、数组、可选字段(当输入中某些键缺失时),以及联合类型。粘贴真实的 API 响应,几秒钟内即可获得可直接用于生产环境的 TypeScript 代码。


3. JSON 转 Zod Schema:运行时验证

TypeScript 接口仅在编译时有效。若需在运行时验证——对 API 响应、表单数据或配置文件进行运行时校验——则需要 Zod。我们的 JSON to Zod 转换器可从任意 JSON 生成完整的 Zod schema。

基于上面相同的输入:

import { z } from "zod";

const MetadataSchema = z.object({
  createdAt: z.string().datetime(),
  active: z.boolean(),
});

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  roles: z.array(z.string()),
  metadata: MetadataSchema,
});

const RootSchema = z.object({
  user: UserSchema,
});

注意其智能类型推断——createdAt 被识别为 ISO 日期时间字符串,email 被检测为电子邮件地址。这些并非简单的 z.string(),而是经过格式验证的类型。


4. JSON Schema 验证器:根据 Schema 验证数据

如果你拥有 JSON Schema(Draft 4、6、7 或 2019-09),并需要根据它验证数据,我们的 JSON Schema Validator 会在浏览器中使用 ajv 库执行验证。

使用场景:

  • 在开发期间验证 API 请求/响应的数据载荷
  • 测试生成的数据是否符合 schema
  • 在部署前调试 schema 验证错误
  • 验证配置文件是否符合规范

验证器会显示详细的错误路径——不只是"验证失败",而是精确指出哪个字段失败以及原因:

/user/email: must match format "email"
/user/age: must be >= 0
/user/roles/2: must be string

5. JSON Diff 查看器:精确查看变更内容

在调试 API 变更或比较两个数据快照时,我们的 JSON Diff Viewer 可精确显示新增、删除或修改的内容。

左侧(变更前):              右侧(变更后):
{                             {
  "status": "active",           "status": "inactive",   ← 已修改
  "count": 42,                  "count": 42,
  "tags": ["a", "b"],           "tags": ["a", "b", "c"] ← 新增 "c"
  "deprecated": true        
}                             }                         ← 已删除 "deprecated"

差异以树形视图展示,并使用颜色标注:

  • 🟢 绿色:新增
  • 🔴 红色:删除
  • 🟡 黄色:修改
  • ⬜ 灰色:未变更

常见使用场景:

  • 比较代码变更前后的两个 API 响应
  • 检查大型配置文件中的变更内容
  • 调试缓存响应与新鲜响应之间的差异
  • 验证数据迁移是否产生了预期输出

6. JSONPath 查找器:点击即可获取路径

JSONPath 是 JSON 的查询语言——相当于 XML 的 XPath。当你需要获取某个特定嵌套值的 JSONPath 时,我们的 JSON Path Finder 允许你点击树形结构中的任意值,即时显示其路径。

{
  "store": {
    "books": [
      { "title": "Clean Code", "price": 29.99 },
      { "title": "The Pragmatic Programmer", "price": 39.99 }
    ]
  }
}

点击 29.99 → 路径:$.store.books[0].price 点击 "The Pragmatic Programmer" → 路径:$.store.books[1].title

路径同时以点表示法($.store.books[0].price)和括号表示法($['store']['books'][0]['price'])显示,便于在 JavaScript、Python 或任何 JSONPath 库中使用。


7. JSON 转 CSV / CSV 转 JSON:格式互转

API 返回 JSON,电子表格需要 CSV。我们的 CSV ↔ JSON Converter 支持双向转换。

JSON 数组 → CSV:

[
  { "name": "Alice", "age": 30, "city": "NYC" },
  { "name": "Bob", "age": 25, "city": "LA" }
]

转换结果:

name,age,city
Alice,30,NYC
Bob,25,LA

CSV → JSON: 反向操作——将带有表头的 CSV 转换为对象数组。支持带引号的字段、值中包含逗号,以及各种换行符格式。

如需对 CSV 数据进行更强大的操作,可使用我们的 SQL on CSV 工具,直接对上传的 CSV 文件运行 SELECT 查询——无需编写一行 Python 代码即可完成筛选、排序和关联。


8. JSON 转 SQL:生成 INSERT 语句

在使用 JSON 数据填充数据库时,我们的 JSON to SQL Converter 可为任意 SQL 方言生成 INSERT 语句。

输入:

[
  { "id": 1, "name": "Alice", "email": "alice@example.com" },
  { "id": 2, "name": "Bob", "email": "bob@example.com" }
]

输出(PostgreSQL):

INSERT INTO users (id, name, email) VALUES
(1, 'Alice', 'alice@example.com'),
(2, 'Bob', 'bob@example.com');

支持 MySQL、PostgreSQL、SQLite 和 SQL Server 方言——针对每种方言正确处理引号风格、NULL 值和布尔值的表示方式。


9. JSON 表格查看器:以电子表格视图展示 JSON 数组

有时你并不需要编写查询——只是想把 JSON 数组以表格形式呈现。我们的 JSON Table Viewer 可将任意 JSON 对象数组渲染为可排序、可搜索的表格。

点击列标题进行排序,在搜索框中输入内容以筛选行。支持任意大小的数组,通过扁平化处理嵌套对象,并高亮显示匹配的搜索词。


快速参考

任务 工具
格式化/验证 JSON JSON Formatter
生成 TypeScript 接口 JSON to TypeScript
生成 Zod 验证 schema JSON to Zod
根据 JSON Schema 验证 JSON Schema Validator
比较两个 JSON 对象 JSON Diff Viewer
查找某个值的 JSONPath JSON Path Finder
JSON ↔ CSV 互转 CSV ↔ JSON Converter
生成 SQL INSERT 语句 JSON to SQL
以表格形式查看 JSON JSON Table Viewer

贯穿始终的一点:所有这些工具完全在你的浏览器中运行。大型 JSON 数据永远不会离开你的设备,因此可以安全地用于生产数据、响应中嵌入的 API 密钥,以及任何不希望由第三方服务器处理的敏感数据载荷。