前端 JsonPath 的使用与应用场景

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

在操作数据的过程中，经常会有一些特殊的场景，或是过滤数据。

JsonPath 可以作为一种解决方案，用来提取指定 JSON 文档的部分内容。JSonPath 支持许多编程语言，如 Javascript、Java、Python 等

JsonPath 可以理解为是一种解析规则，它对于 json 的解析非常强大，无论是对象还是数组都可以进行处理

比如想要获取某个 Json 结构中的某个 key 值里面的内容，或者匹配出某个符合条件的字段的值，可以进行如下操作：

获取单个值：

获取多个值的合集：

操作

• 解析数据与正则表达式类似，需要配置相应的规则
• JsonPath 的根对象始终为$
• JsonPath 基本解析规则
  1. $ // 匹配根元素
  2. @ // 表示当前元素
  3. .或[] // 匹配下级元素
  4. .. // 递归匹配所有子元素
  5. *（星号) // 通配符，匹配下级所有元素
  6. // 下标运算符，根据索引获取元素，JsonPath索引从0开始（XPath索引从1开始）
  7. [ , ] // 连接操作符，将多个结果拼接成数组返回
  8. [start:end:step] // 数据切片
  9. ?() // 过滤，括号内填写过滤条件

其它操作实例可以参考 JsonPath网站文档 ：gitcode.net/mirrors/jso…

在 Vue 中实现

在 Vue 中可以使用 jsonpath-plus 来实现 Json 的解析，语法规则相同，具体使用如下：

安装

npm install jsonpath-plus

引入和使用

JSONPath() 的第一个参数中传递规则即可

import {JSONPath} from 'jsonpath-plus';

const result = JSONPath({path: '...', json});

运行

过滤出 price 字段值 < 10 的数据，如下：

res = {
    "data":[
        {
            "name":"a",
            "price":10,
        },
        {
            "name":"b",
            "price":18.88
        },
        {
            "name":"b",
            "price":30
        }
    ]
}
const blob = JSONPath('$.data[?(@.price < 20)]', jsonData);
const blob = JSONPath('$.data[?(@.price < 20)].price', jsonData);

运行结果：