在 JavaScript 中对具有多个级别的嵌套对象进行分组

Question

我正在尝试将具有多个属性的大型嵌套对象分组，例如：

[
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 70,
      "name": "Name70"
    }
  },
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 61,
      "name": "Name61"
    }
  },
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 4,
      "name": "Name4",
      "sub": {
        "id": 5,
        "name": "Name5",
        "sub": {
          "id": 29,
          "name": "Name29"
        }
      }
    }
  },
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 4,
      "name": "Name4",
      "sub": {
        "id": 5,
        "name": "Name5",
        "sub": {
          "id": 8,
          "name": "Name8",
          "sub": {
            "id": 163,
            "name": "Name163"
          }
        }
      }
    }
  },
  {
    "id": 10,
    "name": "Name10",
    "sub": {
      "id": 4,
      "name": "Name4"
    }
  }
]

如您所见，“sub”目前还不是数组，但即使其中只有一个对象，它们也会出现在预期的输出中。
我想递归地按对象的 id 对数组进行分组以获得这种输出：

[
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": [
      {
        "id": 70,
        "name": "Name70"
      },
      {
        "id": 61,
        "name": "Name61"
      },
      {
        "id": 4,
        "name": "Name4",
        "sub": [
          {
            "id": 5,
            "name": "Name5",
            "sub": [
              {
                "id": 29,
                "name": "Name29"
              },
              {
                "id": 8,
                "name": "Name8",
                "sub": [
                  {
                    "id": 163,
                    "name": "Name163"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "id": 10,
    "name": "Name10",
    "sub": [
      {
        "id": 4,
        "name": "Name4"
      }
    ]
  }
]

到目前为止，我用 lodash 和 d3.nest() 尝试了一些恶作剧，但我似乎无法对其进行分组。
大家有没有遇到过类似的情况？如果是这样，您是如何编写代码的？

非常感谢

Answer 1

您可以使用递归方法，通过查找相同的id 将对象合并到数组中。

const
    merge = (target, { sub, ...o }) => {
        let temp = target.find(({ id }) => id === o.id);
        if (sub) sub = merge(temp?.sub || [], sub)
        if (!temp) target.push(temp = { ...o, sub });
        return target;
    };

var data = [{ id: 14, name: "Name14", theme: true, sub: { id: 70, name: "Name70" } }, { id: 14, name: "Name14", theme: true, sub: { id: 61, name: "Name61" } }, { id: 14, name: "Name14", theme: true, sub: { id: 4, name: "Name4", sub: { id: 5, name: "Name5", sub: { id: 29, name: "Name29" } } } }, { id: 14, name: "Name14", theme: true, sub: { id: 4, name: "Name4", sub: { id: 5, name: "Name5", sub: { id: 8, name: "Name8", sub: { id: 163, name: "Name163" } } } } }, { id: 10, name: "Name10", sub: { id: 4, name: "Name4" } }],
    result = data.reduce(merge, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

您可以为每个sub 属性创建一个Map——由id 键入——并将对象合并到这些映射中。然后最后将那些sub-maps 转换回sub-arrays：

function mergeArray(arr) {
    function mergeObject(a, b) {
        while (b = b.sub) {
            if (!a.sub) a.sub = new Map;
            let child = a.sub.get(b.id);
            if (child) a = child;
            else a.sub.set(b.id, a = { id: b.id, name: b.name });
        }
    }

    function convertMap(map) {
        return Array.from(map.values(), obj => {
            if (obj.sub) obj.sub = convertMap(obj.sub);
            return obj;
        });
    }

    let map = new Map(arr.map(({id, name}) => [id, {id, name}]));
    for (let item of arr) mergeObject(map.get(item.id), item);
    return convertMap(map);
}

// Demo with input from question
let input = [{"id": 14,"name": "Name14","theme": true,"sub": {"id": 70,"name": "Name70"}},{"id": 14,"name": "Name14","theme": true,"sub": {"id": 61,"name": "Name61"}},{"id": 14,"name": "Name14","theme": true,"sub": {"id": 4,"name": "Name4","sub": {"id": 5,"name": "Name5","sub": {"id": 29,"name": "Name29"}}}},{"id": 14,"name": "Name14","theme": true,"sub": {"id": 4,"name": "Name4","sub": {"id": 5,"name": "Name5","sub": {"id": 8,"name": "Name8","sub": {"id": 163,"name": "Name163"}}}}},{"id": 10,"name": "Name10","sub": {"id": 4,"name": "Name4"}}];

console.log(mergeArray(input));

Answer 3

我会用递归函数来做，因为我认为它们更通用：

const data = [{
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 70,
      "name": "Name70"
    }
  },
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 61,
      "name": "Name61"
    }
  },
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 4,
      "name": "Name4",
      "sub": {
        "id": 5,
        "name": "Name5",
        "sub": {
          "id": 29,
          "name": "Name29"
        }
      }
    }
  },
  {
    "id": 14,
    "name": "Name14",
    "theme": true,
    "sub": {
      "id": 4,
      "name": "Name4",
      "sub": {
        "id": 5,
        "name": "Name5",
        "sub": {
          "id": 8,
          "name": "Name8",
          "sub": {
            "id": 163,
            "name": "Name163"
          }
        }
      }
    }
  },
  {
    "id": 10,
    "name": "Name10",
    "sub": {
      "id": 4,
      "name": "Name4"
    }
  }
]

// setting up arrays
const recursiveModify = (node) => {
  if (typeof node.sub === "undefined") {
    return node
  } else {
    node.sub = [recursiveModify(node.sub)]
    return node
  }
}

const recursiveReduce = (nodes) => {
  return nodes.reduce((a, c) => {
    const item = a.find(e => e.id === c.id)
    if (!item) {
      a.push(c)
    } else {
      item.sub = recursiveReduce([...item.sub, ...c.sub])
    }
    return a
  }, [])
}

const dataWithArray = data.map(node => {
  return recursiveModify(node)
})

const result = recursiveReduce(dataWithArray)
console.log(result)

不幸的是，我只能通过两次传递来做到这一点——一次用于将sub 创建为arrays，然后一次用于实际对数据进行分组。我很确定它可以一次性完成 - 我没有更多的时间来解决它。