如何重塑嵌套JSON数据？适配DRF、React-Redux前端动态展示

嘿，这个嵌套JSON扁平化的需求很常见，用原生JS就能轻松搞定，正好帮你巩固Vanilla JS的知识！

你的核心需求是把每个数据项里的j_column嵌套对象展开到顶层，同时保留原有的id字段，而且还要兼容不同数据项键数量不一致的情况——其实这个场景用数组map方法+对象展开运算符就能完美解决，代码简洁又高效：

const data = [
  { 
    "id": 1, 
    "j_column": { 
      "name": "James", 
      "outside_id": 1, 
      "alt_name": "Jim", 
      "full_name": "James the third" 
    } 
  }, 
  { 
    "id": 3, 
    "j_column": { 
      "name": "Dennis", 
      "outside_id": 57, 
      "alt_name": "Denny", 
      "full_name": "Dennis the third", 
      "nickname": "Denny the super star" 
    } 
  }
];

// 核心处理逻辑
const newData = data.map(item => ({
  id: item.id,
  ...item.j_column // 把嵌套的j_column对象展开到顶层
}));

console.log(newData);

代码解释： #

• Array.map()会遍历原数组的每一项，返回一个新的对象组成的数组，不会修改原数据（符合函数式编程的最佳实践）
• 先保留顶层的id字段，然后用...展开运算符把j_column里的所有键值对“平铺”到顶层对象中——不管j_column里有多少个键（比如第二个数据多了nickname），都会被自动合并进去，完全适配你说的键数量不同的场景

更健壮的版本（处理j_column可能不存在的情况）： #

如果你的API返回数据里可能存在没有j_column的项，为了避免报错，可以加个兜底判断：

const newData = data.map(item => ({
  id: item.id,
  ...(item.j_column || {}) // 如果j_column不存在，就展开空对象，防止报错
}));

前端动态展示的小技巧： #

处理完数据后，如果你想动态生成列（不用硬编码列名），可以先提取所有唯一的键：

// 获取所有数据项的键，去重后得到列名列表
const columnNames = [...new Set(newData.flatMap(item => Object.keys(item)))];
// 输出：["id", "name", "outside_id", "alt_name", "full_name", "nickname"]

之后就可以用这个columnNames数组动态渲染表头和表格内容啦，完全不用写死列名~

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