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 數據會更靈活～