从平面数组构建节点，如数组答案

【问题标题】：Build nodes like array from flat array从平面数组构建节点，如数组
【发布时间】：2022-11-30 03:36:56
【问题描述】：

我正在尝试重组以下没有 parent_id 的 javascript 平面数组。

我想为 React Tree Table 提供一个结构，例如此页面中的示例： https://www.robinwieruch.de/react-tree-table/

data = [{
  id: 1,
  activity: 'Activity 1',
  workplace: 'Workplace 1',
  machine: 'Machine 1',
  error: 'Error 1'
  number: 'Doc number 1'
  hours: 4,
},
{
  id: 2,
  activity: 'Activity 1',
  workplace: 'Workplace 1',
  machine: 'Machine 2',
  error: 'Error 2'
  number: 'Doc number 2'
  hours: 3,
},
{
  id: 3,
  activity: 'Activity 2',
  workplace: 'Workplace 2',
  machine: 'Machine 3',
  error: 'Error 3'
  number: 'Doc number 3'
  hours: 3,
},
{
  id: 4,
  activity: 'Activity 2',
  workplace: 'Workplace 3',
  machine: 'Machine 4',
  error: 'Error 4'
  number: 'Doc number 4'
  hours: 6,
},
....

]

我想要一个根据这个数组的键动态分组的另一个数组：

groups = ['activity', 'workplace', ...]

我想要一个这样的结构并将另一个数组传递给组。理想情况下，希望对每个组中的小时数求和

data = [{
  name: 'Activity 2',
  hours: 7
  nodes: [
    name: 'Workplace 2',
    hours: 7,
    nodes: [{
      id: 1,
      activity: 'Activity 1',
      workplace: 'Workplace 1',
      machine: 'Machine 1',
      error: 'Error 1'
      number: 'Doc number 1'
      hours: 4,
    },
      id: 2,
      activity: 'Activity 1',
      workplace: 'Workplace 1',
      machine: 'Machine 2',
      error: 'Error 2'
      number: 'Doc number 2'
      hours: 3,
    },
    ]
  ]
},
{
  name: 'Activity 2',
  hours: 7
  nodes: [
    name: 'Workplace 2',
    hours: 3,
    nodes: [{
      id: 1,
      activity: 'Activity 2',
      workplace: 'Workplace 2',
      machine: 'Machine 3',
      error: 'Error 3'
      number: 'Doc number 3'
      hours: 3,
    }
    ]
  ],
  [
    name: 'Workplace 3',
    hours: 6,
    nodes: [{
      id: 1,
      activity: 'Activity 2',
      workplace: 'Workplace 3',
      machine: 'Machine 4',
      error: 'Error 4'
      number: 'Doc number 4'
      hours: 6,
    }
    ]
  ]
}]

我已经制作了这段代码：

const groupOverview = () => data
    .reduce((r, o) => {
        activatedGroup.reduce((p, key) => {
            let name = o[key],
                temp = (p.nodes = p.nodes || []).find(q => q.name === name);
            if (!temp) {
                p.nodes.push(temp = { name });
            }
            return temp;
        }, r)
        return r;
    }, { nodes: [] })
    .nodes;

但是我没有最后一个孩子的总和和所有信息。

【问题讨论】：

标签： javascript reactjs algorithm tree

【解决方案1】：

您可以使用递归函数。首先创建一个由第一个键的数据键控的映射，将一个组对象与nodes 和hours 属性相关联，然后填充节点并汇总小时数。

然后对那些（较小的）节点数组递归重复。当没有更多的键可以分组时，递归停止。

这是一个实现：

function groupAndSum(data, [key, ...keys]) {
    if (key === undefined) return data;
    const groups = new Map(data.map(o => [o[key], { name: o[key], hours: 0, nodes: [] }]));
    for (const o of data) {
        const parent = groups.get(o[key]);
        parent.nodes.push(o);
        parent.hours += o.hours;
    }
    for (const o of groups.values()) o.nodes = groupAndSum(o.nodes, keys);
    return [...groups.values()];
}

// Your example data
const data = [{id: 1,activity: 'Activity 1',workplace: 'Workplace 1',machine: 'Machine 1',error: 'Error 1',number: 'Doc number 1',hours: 4,}, {id: 2,activity: 'Activity 1',workplace: 'Workplace 1',machine: 'Machine 2',error: 'Error 2',number: 'Doc number 2',hours: 3,}, {id: 3,activity: 'Activity 2',workplace: 'Workplace 2',machine: 'Machine 3',error: 'Error 3',number: 'Doc number 3',hours: 3,}, {id: 4,activity: 'Activity 2',workplace: 'Workplace 3',machine: 'Machine 4',error: 'Error 4',number: 'Doc number 4',hours: 6,}];

const result = groupAndSum(data, ["activity", "workplace"]);
console.log(result);

【讨论】：

【解决方案2】：

谢谢！有用！很简单：）

【讨论】：