结果集过滤器

黄健大约 5 分钟进阶使用

JS脚本过滤器

当我们在使用动态数据源时，会面临非标准的数据结果集接入的场景，此时可通过结果集过滤器进行字段类型变更、数值去零、字段拆分、字段重组等数据格式转换以及一些简单的逻辑运算。

如果只是简单的字段绑定，而不需要对结果集字段进行计算逻辑，可直接使用数据字段映射进行配置。

结果集过滤器采用标准JS语法，JS语法参考：

PageNow中基于JS标准语法之上，定义了自己的编写标准，过滤器中通过ds_resultObj变量来存储结果集对象，我们只需要对ds_resultObj进行重构赋值即可：

以多行文本组件为例，假设组件使用了API数据源，且数据源返回的结果集为：

[
  {
    "text": "hello world"
  }
]

由于以上结果集的key为text，而多行文本组件约定的结果集格式的key值为value，那么以上的结果集是无法被组件解析显示的，下面使用过滤器对结果集进行二次加工：

let newData = [
  {
    value: 'new value'
  }
]
ds_resultObj = newData

以上为固定写法，必须new一个新的变量来承载新构建的结果集数据，最后将新建的变量赋值给ds_resultObj，即完成JS脚本过滤器的编写，组件最后会自动运行过滤器来解析数据源默认返回的结果集。

整理一些常见的过滤器使用场景，在编写过程中，可以举一反三，实际使用中会有更复杂的场景。

以下均以【多行文本】组件的结果集格式要求作为参考：

1、字段类型转换

当组件要求的结果集格式为数值型，而数据源返回的为字符串时，可通过滤器进行转换

例如以下value字段为字符串，需转换为数值型：

[
  {
    "value": "188"
  }
]

过滤器写法:

let newData = ds_resultObj.map(o => ({...o, value: parseInt(o.value)}))
ds_resultObj = newData

2、取部分值

当数据源返回的数据冗余，只需其中部分的字段时，可通过过滤器进行字段摘取

例如取以下数据中的value值：

[
  {
    "name": "zhangsan",
    "age": 30,
    "introduction": {
      "value": "我是张三，我今年30岁了"
    }
  }
]

过滤器写法

let newData = [{value: ds_resultObj[0].introduction.value}]
da_resultObj = newData

3、简单运算

当需要从原始结果集中取多个值进行计算获取新值，可通过过滤器进行简单计算或拼接

例如从下面数据中取score1和score2进行相加

[
  {
    "score1": 100,
    "score2": 200
  }
]

过滤器写法

let newData = [{value: ds_resultObj.score1 + ds_resultObj.score2}]
da_resultObj = newData

数据字段映射的作用在于增强JS脚本过滤器的使用场景，JS脚本过滤器是通过编写JS脚本的方式对结果集进行二次过滤，而字段映射则是通过配置的方式实现快速的结果集字段匹配，方便非编程人员进行组件的结果集对接工作。

以【多行文本】组件作为示例，说明数据字段映射如何配置，首先【多行文本】组件要求的结果集格式为：

[
  {
    "value": "我是多行文本组件绑定的文本"
  }
]

打开【多行文本】组件的数据源配置界面：

当我们的数据源请求返回的结果集格式中没有value属性，而是如下所示的结果集格式时，组件是无法正常解析并绑定结果集渲染的：

[
  {
    "text": "我是多行文本组件绑定的文本"
  }
]

此时我们只需要配置字段映射，将value映射到text属性，系统会对结果集进行自动字段映射过滤，配置方式如下：

配置好之后请记得点击【保存生效】按钮，生效之后即可完成结果集的自动匹配，匹配后的结果集格式将会变成如下格式：

[
  {
    "text": "我是多行文本组件绑定的文本",
    "value": "我是多行文本组件绑定的文本"
  }
]

系统会自动将text属性进行拷贝生成value字段属性，此时组件即可正常解析结果集并渲染文本内容，这里即使有两个值text和value，也是没问题的，只要存在一个value值就可以。

结果集过滤的处理流程

当我们对组件进行数据源配置后（包括静态数据源），组件默认会将数据源处理后的结果集作为原始结果集，然后原始结果集将会按如下流程进行二次处理并返回处理后结果集供组件进行数据绑定：

目前在PageNow中，原始结果集会进行两层过滤，首先进行JS脚本过滤器过滤，然后将过滤后的结果集交由字段映射过滤器过滤，最后将两层处理后的结果集返回给组件进行数据绑定并渲染，因此可以得出结论：JS脚本过滤器始终在字段映射过滤前执行。