JavaScript实现多层对象数组转为单层数组的问题

原始数据 #

const data = [
    {
        "id": 1,
        "name": "Beauty",
        "children": {
            "0": {
                "id": 5,
                "parent_id": 1,
                "name": "Dermatology",
                "code": "dermatology",
                "status": 1,
                "updated_at": 1678262275,
                "created_at": 1678262275
            },
            "1": {
                "id": 7,
                "parent_id": 1,
                "name": "Plastic surgery",
                "code": "plastic_surgery",
                "status": 1,
                "updated_at": 1678262275,
                "created_at": 1678262275
            }
        }
    },
    {
        "id": 2,
        "name": "Healthiness",
        "children": {
            "0": {
                "id": 11,
                "parent_id": 2,
                "name": "Ophthalmology",
                "code": "ophthalmology",
                "status": 1,
                "updated_at": 1678262275,
                "created_at": 1678262275
            },
            "1": {
                "id": 13,
                "parent_id": 2,
                "name": "Pediatrics",
                "code": "pediatrics",
                "status": 1,
                "updated_at": 1678262275,
                "created_at": 1678262275
            },
        }
    }
]

目标结构 #

提取所有子项并为每个子项添加parent_name字段，最终得到单层数组：

[
    {
        "id": 5,
        "name": "Dermatology",
        "parent_id": 1,
        "parent_name": "Beauty"
    },
    {
        "id": 7,
        "name": "Plastic surgery",
        "parent_id": 1,
        "parent_name": "Beauty"
    },
    {
        "id": 11,
        "name": "Ophthalmology",
        "parent_id": 2,
        "parent_name": "Healthiness"
    },
    {
        "id": 13,
        "name": "Pediatrics",
        "parent_id": 2,
        "parent_name": "Healthiness"
    },
]

现有代码问题 #

你写的代码存在两个核心问题：

1. item.children是对象而非数组，flat()方法对对象无效，无法展开子项
2. 丢失了父级的name字段，无法为子项添加parent_name

let cusData = data
          .map((item) => item.children)
          .flat()
          .map((child) => {
            return {id: child.id, name: child.name, parent_id: child.parent_id}
          });

解决方案 #

基础版本（处理当前层级）

使用reduce遍历父项，将每个父项的children对象转为数组，为每个子项添加parent_name后合并到结果数组：

const result = data.reduce((acc, parent) => {
  // 将children对象转为数组
  const childrenArray = Object.values(parent.children);
  // 为每个子项添加parent_name，再合并到结果
  const processedChildren = childrenArray.map(child => ({
    id: child.id,
    name: child.name,
    parent_id: child.parent_id,
    parent_name: parent.name
  }));
  return acc.concat(processedChildren);
}, []);

console.log(result);

递归版本（支持任意嵌套深度）

如果数据存在多层嵌套（比如子项也有children），可以用递归函数处理：

function flattenNestedData(items) {
  return items.reduce((acc, item) => {
    // 如果当前项有子项，先处理当前层级子项
    if (item.children) {
      const childrenArray = Object.values(item.children);
      const processedChildren = childrenArray.map(child => ({
        id: child.id,
        name: child.name,
        parent_id: child.parent_id,
        parent_name: item.name
      }));
      // 递归处理子项的子项，合并所有结果
      return acc.concat(processedChildren, flattenNestedData(childrenArray));
    }
    return acc;
  }, []);
}

const result = flattenNestedData(data);
console.log(result);

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