前端字典表根据id匹配对应名字

一、前端可以很多字段后台传过来的为字典id，前端需要展示id对应名称

1.全部转换格式，适合全局使用（暂时在小程序上使用）

//调取接口获得数据    
dataList: function() {
      resume.dataList().then(res => {
//下面为主要方法
       var dict={}
       var trade = {}
      Object.keys(res.data).map(key => {
        dict[key]=  res.data[key].map(i => {
          trade[i.id]=i.dictValue
        });
        wx.setStorageSync('dictType', trade)
        getApp().globalData.dictType = trade
      });
    })
        .catch(res => {})
    },

data: {
COMPANY_LOGIN_TYPE: [
0: {defId: 23, deleteFlag: 0, description: "企业账号类型", dictValue: "主账号", editable: 0, id: 113, seqIndex: 0}
1: {defId: 23, deleteFlag: 0, description: "企业账号类型", dictValue: "次账号", editable: 0, id: 114, seqIndex: 0}
],
COMPANY_TYPE: [
0: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "外资", editable: 0, id: 23, seqIndex: 0}
1: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "合资", editable: 0, id: 24, seqIndex: 1}
2: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "国企", editable: 0, id: 25, seqIndex: 2}
3: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "民营公司", editable: 0, id: 26, seqIndex: 3}
4: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "上市公司", editable: 0, id: 27, seqIndex: 4}
5: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "创业公司", editable: 0, id: 28, seqIndex: 5}
6: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "政府机关", editable: 0, id: 29, seqIndex: 6}
7: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "事业单位", editable: 0, id: 30, seqIndex: 7}
8: {defId: 5, deleteFlag: 0, description: "企业类型", dictValue: "非营利机构", editable: 0, id: 31, seqIndex: 8}
]
}

将字典表转换为对象格式，id为键，值为名称

取值是这样

<view class="basic-essential-text">{{dictType[educationalId]}}
</view>
<!--
//[]里面填写字典表id的值
//js里面在onLoad里面拿到这个对象 
//   this.setData({
 //    dictType:app.globalData.dictType
    }); 
-->

2.封装一个方法，小程序上不像前端主流框架那样可以实现双向绑定，也不能在HTML中直接写js（适用vue和react）,小程序的方法也可适用大部分js根据id查名称需求。（主要就是重新遍历一遍字典表，转换成自己好取值的方法）

import { GET } from "@/base/request";
//这步是调取接口获得数据//vue,react的方法，包括一些UI框架封装的发法都不一样，只是获取数据，数据结构同上表
const getAllDict = async function() {
  const res = await GET("/dict/data/list");
  if (res.code === "ACK") {
//这里主要方法，将字段表遍历一遍id和名称做成一个对象
    Object.keys(res.data).map(key => {
      dict[key] = res.data[key].map(i => {
        return { label: i.dictValue, value: i.dictId };
      });
    });
//
  }
};

// 匹配名字
const dictName = function(id, name) {
  if (dict[name]) {
    const res = dict[name].filter(i => i.value === id);
    if (res.length > 0) {
      return res[0].label;
    }
    return "-";
  } else {
    return "-";
  }
};
export { dictName, dict, getAllDict };

import { dictName } from "../../base/dict.js";
//在methods里面加入dictName//此处用vue的方法
  methods: {
    dictName
    },

//标签里面写方法就能找到id对应的名称
<p>{{dictName(data.userInfo.type ,'USER_TYPE')}}</p>

3.单个id匹配名称（以上两个方法适合做全局，大量id匹配Value）

//此为小程序方法，vue和react方法雷同，react中state 和data就基本相同
//拿到要查找的id         
let educational = this.data.educational;
//this.data.columns为数组，就从这个数组中找id对应的值，find方法
//找到id和数组中id相等
var obj = this.data.columns.find(function (obj) {
    return obj.dictId === educational;
     });
//返回完拿obj.value就为id对应的名称