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} ）	复杂数据清洗

四、新手怎么用？

1. 简单需求用 Wizard：

   • 选 Filter → 填条件（如 price > 100 ），编辑器自动生成 JMESPath；
   • 点 Transform 看结果，无需手写语法。

2. 复杂需求学基础语法：

   • 记住 @（当前节点）、.（访问属性）、[*]（遍历数组）、[?条件]（过滤）；
   • 结合 JMESPath 教程 练习，5 分钟就能写简单查询。

五、总结：可视化 + 代码结合的 JSON 处理工具：

• 适合快速筛选、提取 JSON 数据，不用写循环 / 判断代码；
• 会基础 JMESPath 语法后，能高效处理接口返回、配置文件等 JSON 数据；
• 新手先用 Wizard 功能，熟练后再手写 Query，处理 JSON 数据会更灵活～