js中修改数组对象中对象的键名-蒲公英云

js中修改数组对象中对象的键名

- 日理万妓 2022-08-28 11:51 346阅读 0赞

场景分析：一个数据字典列表，如下

let dictList = [
    { id: 1, name: "sn", desc: "序列号"},
    { id: 2, name: "prop", desc: "属性"},
    { id: 3, name: "type", desc: "类型"},
    { id: 4, name: "user", desc: "负责人"}
]

后台返回的数据列表，如

let data = [
    { sn: 121, user: "张氏"},
    { sn: 122, prop: "属性1", type: "类型1"},
    { prop: "属性1", type: "类型1", user: "李四"},
]

需求：后台返回的数据列表想用表格展示，这个数据列表中每个对象返回的键值对是不固定的，但是取值是从数据字典中取来的。为了方便展示，想把后台返回的数据列表中对象的键改为数据字典中对应 name 的 desc 字段，就动态修改对象的键名。
做法：
我们可以先将数据字典列表转换为一个对象 labels

let labels = { }
dictList.forEach(item => { 
 this.$set(labels, item.name, item.desc)
})
console.log(labels)
// { 
  'sn': '序列号',
  'prop': '属性',
  'type': '类型',
  'user': '负责人'
}

然后修改后台数据列表的对象键名

let res = data.map(item => { 
 let obj = { }
 Object.entries(item).forEach(([k, v]) => { 
   obj[labels[k] || k] = v
 })
 return obj
})
console.log(res )