使用JSONPath解析JSON数据

本文由 Deguang 发表于 码路-技术博客

在前端开发中，当接口返回一个复杂的嵌套JSON时，获取其中某个固定层级的数据，需要使用链式取值

// 接口数据
var obj = {
    name: "历史书",
    value: 3,
    children: [
        {
            name: "明清",
            value: "3-1",
            count: 10
        },
        {
            name: "近代",
            value: "3-2",
            count: 20
        }
    ]
}
// 获取第二个子类型的value
const val = obj.children[1].value // 3-2

当层级结构再次变长，使用链式取值代码冗长，且容易出错如，若这里的数据层级出现问题，比如children长度仅为1，就会遇到我们常见的报错：Uncaught TypeError: Cannot read property 'value' of undefined。

为了避免报错导致问题，这里就可以使用 JSONPath 来进行取值。

JSONPath

在认识JSONPath前，先了解下xPath。xPath是XML的路径语言，使用路径标识符通过层级结构定位文档元素，例如在HTML 中定位元素：

类似的，JSONPath 是通过路径检索JSON，支持操作符、函数、过滤器等用法，方便快速定位，上面的value获取，可以用JSONPath 描述为JSONPath('$.children[1].value', obj)

操作符

符号	描述
$	查询的根节点对象，用于表示一个ison数据，可以是数组或对象
@	过滤器断言 (filter predicate) 处理的当前节点对象，类似于iava中的this字段
*	通配符，表示一个名字或数字
*	递归搜索
.<name>	子节点
['<name>'(,'<name>')	一个或多个子节点
<number> (, <number>)]	一个或多个数组下标
[start:end]	数组片段，区间为[start.end),不包含end
[?(<expression>)]	过滤器表达式，表达式结果必须是boolean

函数

函数可以在路径的尾部调用，函数的输出是路径表达式的输出

符号	描述	输出
min()	获取数值类型数组的最小值	Double
max()	获取数值类型数组的最大值	Double
avg()	获取数值类型数组的平均值	Double
stddev()	获取数值类型数组的标准差	Double
length()	获取数值类型数组的长度	Integer

过滤器

过滤器是用于筛选数组的逻辑表达式。

操作符	描述
==	等于，但数字1不等于字符1
!=	不等于
<	小于
<=	小于等于
>	大于
>=	大于等于
=~	判断是否符合正则表达式，例如[?(@.value =~ foo.*?/i)]
in	所属符号，例如[?(@.size in [s，M)]
nin	排除
size	长度
empty	判空

---

参考：
https://goessner.net/articles/JsonPath/