如何在JavaScript中实现动态列？基于DB与表单JSON数据映射

核心思路 #

先把formJson转换成ID-标签映射表，实现ID到列名的快速查找；再遍历dbData，逐个将原始数据转换为目标格式。

实现代码 #

// 第一步：构建ID与标签的映射表，提升查找效率
const idToLabel = formJson.reduce((map, item) => {
  map[item.id] = item.label;
  return map;
}, {});

// 第二步：遍历数据库数据，转换为目标结构
const result = dbData.map(dbItem => {
  const newItem = { _id: dbItem._id };
  // 遍历当前条目ins中的所有键值对
  for (const [id, value] of Object.entries(dbItem.ins)) {
    // 用映射表替换键名为对应的列名
    newItem[idToLabel[id]] = value;
  }
  return newItem;
});

console.log(result);

代码说明 #

• 映射表构建：通过Array.reduce()将formJson转换为{ "1111": "Personal Email", ... }的结构，后续查找列名的时间复杂度为O(1)，比每次遍历formJson更高效。
• 数据转换：用Array.map()遍历每条数据库数据，先保留_id字段，再通过Object.entries()遍历ins中的键值对，将ID替换为对应标签作为新对象的键，直接复用原始值。
• 动态适配：后续如果formJson新增或修改ID与标签的对应关系，无需修改核心逻辑，仅更新formJson即可适配新的列名需求。

运行结果 #

执行代码后将得到与预期一致的结构：

const result = [{
   "_id": 12345,
   "Personal Email":"gems@gmail.com",
   "Work Email":"work@gmail.com",
   "Contact Number":"8877665544"
},
{
   "_id": 12346,
   "Personal Email":"gems2@gmail.com",
   "Work Email":"work2@gmail.com",
   "Contact Number":"8877665566"
}];

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