VueJS中提取JSON指定列数组去重适配BootstrapVue选择组件

你可以通过数组遍历+Set去重两步快速实现需求，代码非常简洁：

核心处理逻辑 #

// 假设原始JSON数据存放在变量rawData中
const Input1Options = [...new Set(rawData.map(item => item.Input1))].map(text => ({ text }))

逻辑说明 #

1. 先通过map遍历原始数组，提取所有Input1字段的字符串值
2. 用ES6的Set数据结构自动去除重复值
3. 用扩展运算符...将Set结构转回普通数组
4. 最后二次map将每个字符串包装为{text: 'xxx'}格式，完全匹配b-form-select的options属性要求

完整使用示例 #

场景1：本地导入JSON文件 #

如果你是把JSON存在项目本地的文件（比如src/assets/data.json），可以直接导入后在data中处理：

<template>
  <b-form-select v-model="selectedVal" :options="Input1" placeholder="请选择" />
</template>

<script>
import rawData from '@/assets/data.json'

export default {
  data() {
    return {
      selectedVal: '',
      // 直接处理后赋值，注意data内属性用冒号而非等号，你问题里的示例语法有小错误
      Input1: [...new Set(rawData.map(item => item.Input1))].map(text => ({ text }))
    }
  }
}
</script>

场景2：接口动态获取JSON #

如果数据是从后端接口返回的，在接口回调中处理即可：

// 以axios请求为例
axios.get('/api/get-data').then(res => {
  this.Input1 = [...new Set(res.data.map(item => item.Input1))].map(text => ({ text }))
})

低版本浏览器兼容方案 #

如果需要兼容不支持Set的旧浏览器，可以用filter实现去重：

Input1: rawData
  .map(item => item.Input1)
  .filter((item, index, arr) => arr.indexOf(item) === index)
  .map(text => ({ text }))

内容的提问来源于stack exchange，提问作者patrick96