映射 children 并展平 objects 的多维数组

Question

我正在尝试映射 objects 的多维数组（如下），以便函数 return 成为 objects

的二维数组

var UsersData = {
  data: [
    {
      label: 'CEO',
      type: 'person',
      className: 'p-person',
      expanded: true,
      data: {
        name: 'Walter White',
        avatar: 'logo_octopus.png',
      },
      children: [
        {
          label: 'CFO',
          type: 'person',
          className: 'p-person',
          expanded: true,
          data: {
            name: 'Saul Goodman',
            avatar: 'logo_octopus.png',
          },
          children: [
            {
              label: 'Tax',
              className: 'department-cfo',
            },
            {
              label: 'Legal',
              className: 'department-cfo',
            },
          ],
        },
        {
          label: 'COO',
          type: 'person',
          className: 'p-person',
          expanded: true,
          data: {
            name: 'Mike E.',
            avatar: 'logo_octopus.png',
          },
          children: [
            {
              label: 'Operations',
              className: 'department-coo',
            },
          ],
        },
        {
          label: 'CTO',
          type: 'person',
          className: 'p-person',
          expanded: true,
          data: {
            name: 'Jesse Pinkman',
            avatar: 'logo_octopus.png',
          },
          children: [
            {
              label: 'Development',
              className: 'department-cto',
              expanded: true,
              children: [
                {
                  label: 'Analysis',
                  className: 'department-cto',
                },
                {
                  label: 'Front End',
                  className: 'department-cto',
                },
                {
                  label: 'Back End',
                  className: 'department-cto',
                },
              ],
            },
            {
              label: 'QA',
              className: 'department-cto',
            },
            {
              label: 'R&D',
              className: 'department-cto',
            },
          ],
        },
      ],
    },
  ],
};

我能够生成的代码只能设法为上面数组的前两层创建所需的输出（即便如此，也只能通过合并第 1 层和第 2 层）。

我使用的代码：

function UsersMapping(props) {
  var result = props.data;

  var lv1 = result.flatMap((value) =>
    value.children.flatMap((child) => ({
      supervisor: value.label,
      ...child,
    }))
  );
  var lv2 = lv1.flatMap((value) =>
    value.children.flatMap((child) => ({
      supervisor: value.label,
      ...child,
    }))
  );
  Array.prototype.push.apply(result, lv1);
  Array.prototype.push.apply(result, lv2);

  console.log(result);
  return result;
}

最理想的是，我希望该函数遍历数组的所有级别，将每个 child 映射到它们的 parent（“主管”）并创建此输出：

[
{label: "CEO", type: "person", className: "p-person", expanded: true, data: {name: "Walter White", avatar: "logo_octopus.png"}, …},
{supervisor: "CEO", label: "CFO", type: "person", className: "p-person", expanded: true, …},
{supervisor: "CEO", label: "COO", type: "person", className: "p-person", expanded: true, …},
{supervisor: "CEO", label: "CTO", type: "person", className: "p-person", expanded: true, …},
{supervisor: "CFO", label: "Tax", className: "department-cfo"},
{supervisor: "CFO", label: "Legal", className: "department-cfo"},
{supervisor: "COO", label: "Operations", className: "department-coo"},
{supervisor: "CTO", label: "QA", className: "department-cto"},
{supervisor: "CTO", label: "R&D", className: "department-cto"},
{supervisor: "CTO", label: "Development", className: "department-cto", expanded: true},
{supervisor: "Development", label: "Analysis", className: "department-cto"},
{supervisor: "Development", label: "Front End", className: "department-cto"},
{supervisor: "Development", label: "Back End", className: "department-cto"}
]

任何帮助将不胜感激

Answer 1

您需要使用递归对 children 项（如果存在）重复操作。可能的解决方案：

const usersData = {
  data: [
    {
      label: 'CEO',
      type: 'person',
      className: 'p-person',
      expanded: true,
      data: { name: 'Walter White', avatar: 'logo_octopus.png' },
      children: [
        {
          label: 'CFO',
          type: 'person',
          className: 'p-person',
          expanded: true,
          data: { name: 'Saul Goodman', avatar: 'logo_octopus.png' },
          children: [
            { label: 'Tax', className: 'department-cfo' },
            { label: 'Legal', className: 'department-cfo' }
          ]
        },
        {
          label: 'COO',
          type: 'person',
          className: 'p-person',
          expanded: true,
          data: { name: 'Mike E.', avatar: 'logo_octopus.png' },
          children: [
            { label: 'Operations', className: 'department-coo' }
          ]
        },
        {
          label: 'CTO',
          type: 'person',
          className: 'p-person',
          expanded: true,
          data: { name: 'Jesse Pinkman', avatar: 'logo_octopus.png' },
          children: [
            {
              label: 'Development',
              className: 'department-cto',
              expanded: true,
              children: [
                { label: 'Analysis', className: 'department-cto' },
                { label: 'Front End', className: 'department-cto' },
                { label: 'Back End', className: 'department-cto' }
              ]
            },
            { label: 'QA', className: 'department-cto' },
            { label: 'R&D', className: 'department-cto' }
          ]
        }
      ]
    }
  ]
};

const transform = (arr = [], supervisor) =>
  arr.reduce((list, { children, ...e }) => {
    list.push(supervisor ? { supervisor, ...e } : e);
    if(children) list.push(...transform(children, e.label));
    return list;
  }, []);

console.log(transform(usersData.data));

映射 children 并展平 objects 的多维数组

Map children and flatten multidimensional array of objects

javascript

arrays

json

multidimensional-array

reactjs