JSON 与数据工具:无需编写代码即可格式化、验证、转换和查询 JSON
浏览器端 JSON 工具完整指南——格式化与验证 JSON、生成 TypeScript 接口、转换为 CSV 或 SQL、构建 Zod schema、比较 JSON 差异,以及运行 JSONPath 查询。
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 密钥,以及任何不希望由第三方服务器处理的敏感数据载荷。