微搭问答003-下拉选项如何去重

Posted 2023-03-15 低代码布道师

我设计了一个数据源，里边有一个字段录入的时候有重复数据，我想把这个字段作为查询条件，选择的时候希望去除重复的内容该如何实现

我们来还原一下这个场景，具体思路是在API里就把下拉选项的值填充好，前端我们使用下拉项组件绑定内容的时候就直接显示即可

1 创建数据源

登录微搭控制台，点击新建数据模型

输入名称和标识

我们输入两个字段，分别是项目名称和任务名称

回到数据模型的列表，点击更多，点击管理数据

录入几条测试数据

我们这里的目的就是提取项目名称的信息，去掉重复的内容

2 创建APIs

去重我们可以创建APIs来实现，点击APIs，点击新建APIs

选择自定义代码

输入名称和标识

输入方法的名称和标识，输入如下的代码

module.exports = async function (params, context) 
  // 这里是方法入参
  const result = await context.callModel(
    name: 'xlxxsl_zyo3scs', // 数据模型标识，可以前往「数据源 - 数据模型」列表页查看
    methodName: 'wedaGetRecords', // 数据模型方法标识，支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法
    params: , // 数据模型方法的入参
  );

  let records = result.records.map((item)=>
    return item.xmmc
  )
  let finallyarr = Array.from(new Set(records))
  console.log(records)
  // 这里返回数据，和出参结构映射
  return finallyarr.map((item)=>
    return 
      "label":item,
      "value":item
    
  );
;

代码的意思，第一步我们通过数据模型的API来获取数据源的数据

 const result = await context.callModel(
    name: 'xlxxsl_zyo3scs', // 数据模型标识，可以前往「数据源 - 数据模型」列表页查看
    methodName: 'wedaGetRecords', // 数据模型方法标识，支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法
    params: , // 数据模型方法的入参
  );

我们现在获取的话数组的元素是对象，我们需要提取项目名称这个字段，因此使用数组的map方法重新处理一下结果

let records = result.records.map((item)=>
    return item.xmmc
  )

有了数组之后，我们就可以去重了，使用 Set 数据结构来去除重复元素，将数组转换为 Set，再将 Set 转换回数组即可

let finallyarr = Array.from(new Set(records))

最后我们返回结果的时候要按照下拉组件的要求，将数据处理成对象结构，label是选项的显示名称，而value是选项的选中值

return finallyarr.map((item)=>
    return 
      "label":item,
      "value":item
    
  );

代码写好了之后点击方法测试，测试成功，点击出参映射

3 搭建页面

我们创建一个页面，里边放入下拉选项组件

我们定义一个变量来接收数据源的数据，类型选择数组，输入默认值

默认值输入如下数据

["label":"","value":""]

打开代码编辑器，我们在生命周期函数中将API的数据赋值给变量

export default 
  async onPageLoad(query) 
    //console.log('---------> LifeCycle onPageLoad', query)
    $page.dataset.state.projectitems = await app.cloud.callConnector(
      name:'getUniName_nvr1a98',
      methodName:'fileterArray',
      params:

      
    )
    console.log($page.dataset.state.projectitems)
  ,
  onPageShow() 
    //console.log('---------> LifeCycle onPageShow')
  ,
  onPageReady() 
    //console.log('---------> LifeCycle onPageReady')
  ,
  onPageHide() 
    //console.log('---------> LifeCycle onPageHide')
  ,
  onPageUnload() 
    //console.log('---------> LifeCycle onPageUnload')
  ,

然后给下拉项组件绑定数据，绑定为我们的变量

最终的效果

总结

这一篇我们主要是解决了下拉选项的填充问题，需要通过API来读取数据源，然后去重再填充到数据源里。

很多现在还没接触低码的，认为低码只是拖拖拽拽解决一下简单业务，其实是误读和误判，他本质是一套在线的开发工具，前后端都可以编写。只不过界面的组装是通过可视化的手段完成，这样其实是为了提高开发的效率。还在观望的，不妨开通一个试用账号，亲自体验一下，看看低码究竟可以干哪些内容，做到什么程度。