JSON 编辑器:从语法编写到结构可视化(一)-CSDN博客
在上一篇中,我们了解了 JSON 的语法和编辑器,解决了 “怎么写对 JSON” 的问题。
而实际开发中,更关键的是 “怎么高效处理 JSON 数据” —— 如何从商品列表里筛出高价商品?如何提取关键字段?如何给数据排序?本文将从语法原理→场景拆解→工具联动,系统剖析JSON编辑器数据转换的功能。
一. 技术底层:JMESPath 是什么?
JMESPath 是一套 专门用于查询和转换 JSON 数据的语法规则 ,类似 JSON 版的 “SQL 查询”,支持 过滤、排序、字段提取 等操作。
- 结合 Kooboo平台 的 JSON编辑器 中 可视化向导 + 实时预览,即使不懂语法,也能快速实现数据加工。
2. 界面模块解析
模块 | 作用 | 关键逻辑 |
---|---|---|
Language | 说明用 JMESPath 语法 处理 JSON(类似 SQL 但针对 JSON 的查询语言) | 需学 @ 、. 、[] 等语法 |
Path | 选择要处理的 JSON 片段(默认 (whole document) 处理整个数据) |
可填 widget.items 仅处理子结构 |
Wizard | 可视化向导(简化 JMESPath 编写,适合新手) | 支持过滤、排序、字段选择 |
Query | 手动写 JMESPath 表达式的输入框 | 示例 [*] 表示 “所有数组元素” |
Original | 原始 JSON 数据(左边是操作前的内容) | 实时展示当前要处理的 JSON |
Preview | 转换后的预览结果(点 Transform 后显示) |
验证 JMESPath 是否符合预期 |
二、结合案例(商品数据)理解用法
假设原始 JSON 是商品列表:
[
{ "name": "无线耳机", "price": 299, "stock": 50 },
{ "name": "运动水杯", "price": 49, "stock": 100 }
]
场景 1:筛选价格 > 100 的商品
(1)可视化筛选配置(Wizard)
Filter(过滤):筛选符合条件的元素
- 操作:选择字段
price
→ 运算符>
→ 值100
; - 筛选出 价格 > 100 的商品;
- 点 Transform 后,右侧
Preview
预览仅保留符合条件的结果:[ { "name": "无线耳机", "price": 299, "stock": 50 } ]
(2)自动生成 JMESPath 表达式
界面根据配置,自动生成查询语句:
[? price > `100`]
- 语法解释:
[]
表示对 JSON 数组操作(示例中是商品数组[{}, {}]
);?
是过滤断言,后面跟条件(price > 100
);- 注意:值为字符串时需用
`
包裹(如`100`
,数字也兼容)。
场景 2:提取所有商品名称
Pick(提取):选择需要的字段
- 方法一:Query 填:
[*].name
- 方法二:在 Pick中,选择字段
name
- 结果:
[ "无线耳机", "运动水杯" ]
- 逻辑:
[*]
遍历数组,.name
提取每个对象的name
字段。
场景 3:按价格降序排序
- 方法一:Query 填:
sort_by([*], &price)[::-1]
- 方法二:在排序中,选择字段
price
→ desending (降序);
- 结果:
[ { "name": "无线耳机", "price": 299, "stock": 50 }, { "name": "运动水杯", "price": 49, "stock": 100 } ]
- 逻辑:
sort_by
排序,&price
按price
字段,[::-1]
反转实现降序。
三. Transform 的核心能力
转换类型 | 作用(以商品数据为例) | 典型场景 |
---|---|---|
过滤(Filter) | 保留符合条件的元素(如 price > 100 的商品) |
筛出 “高价商品”“库存不足商品” |
排序(Sort) | 调整数组顺序(如按 price 升序 / 降序排列) |
商品按价格排序 |
提取(Pick) | 只保留指定字段(如仅提取 name 和 price ) |
接口返回去冗余 |
组合运算 | 过滤 + 排序 + 提取(如 [?price>100].{name:name} ) |
复杂数据清洗 |
四、新手怎么用?
简单需求用 Wizard:
- 选 Filter → 填条件(如
price > 100
),编辑器自动生成 JMESPath; - 点 Transform 看结果,无需手写语法。
- 选 Filter → 填条件(如
复杂需求学基础语法:
- 记住
@
(当前节点)、.
(访问属性)、[*]
(遍历数组)、[?条件]
(过滤); - 结合 JMESPath 教程 练习,5 分钟就能写简单查询。
- 记住
五、总结:可视化 + 代码结合的 JSON 处理工具:
- 适合快速筛选、提取 JSON 数据,不用写循环 / 判断代码;
- 会基础 JMESPath 语法后,能高效处理接口返回、配置文件等 JSON 数据;
- 新手先用 Wizard 功能,熟练后再手写 Query,处理 JSON 数据会更灵活~