如何使用扩展运算符完全合并两个树对象？

Question

I am trying to merge two tree objects into one with the spread operator, but I am not getting the correct merged result. How can I fully merge two tree objects with spread operator?

 const tree1 = [{ comments: [{ text: "This a comment for case law 84", id: "84" }, { text: "This a comment for case law 89", id: "89" }], children: [{ comments: [{ text: "This a comment for case law 70", id: "70" }], children: [{ comments: [{ text: "This a comment for case law 83", id: "83" }] }] }] }]; const tree2 = [{ comments: [{ text: "This a comment for case law 184", id: "184" }], children: [{ comments: [{ text: "This a comment for case law 170", id: "170" }], children: [{ comments: [{ text: "This a comment for case law 183", id: "183" }] }] }] }]; const mergedTrees = [{...tree2, ...tree1 }]; console.log("mergedTrees", mergedTrees);

The problem is while merging the properties with the same key get overwritten. The rightmost property has the highest precedence. What I need to get this kind of merge? :

{
  "0": {
    "comments": [
      {
        "text": "This a comment for case law 84",
        "id": "84"
      },
      {
        "text": "This a comment for case law 89",
        "id": "89"
      },
      {
        "text": "This a comment for case law 184",
        "id": "184"
      }
    ],
    "children": [
      {
        "comments": [
          {
            "text": "This a comment for case law 70",
            "id": "70"
          },
          {
            "text": "This a comment for case law 170",
            "id": "170"
          }
        ],
        "children": [
          {
            "comments": [
              {
                "text": "This a comment for case law 83",
                "id": "83"
              },
              {
                "text": "This a comment for case law 183",
                "id": "183"
              }
            ]
          }
        ]
      }
    ]
  }
}

if it's not possible with the spread operator and there is another way to make it, please let me know.

adding a link for tries: https://stackblitz.com/edit/fffika?file=index.ts

Answer 1

You could merge the arrays index-wise and take the same approach for nested children.

 const merge = (a, b) => [a, b].reduce((r, array) => { array.forEach(({ children, ...o }, i) => { r[i]??= { }; Object.entries(o).forEach(([k, v]) => (r[i][k]??= []).push(...v)); if (children) r[i].children = merge(r[i].children || [], children); }); return r; }, []), tree1 = [{ comments: [{ text: "This a comment for case law 84", id: "84" }], news: [{ text: "This news 1 ", id: "1" }], children: [{ comments: [{ text: "This a comment for case law 70", id: "70" }], news: [{ text: "This news 2 ", id: "2" }, { text: "This news 3 ", id: "3" }], children: [{ comments: [{ text: "This a comment for case law 83", id: "83" }], news: [{ text: "This news 4 ", id: "4" }] }] }] }], tree2 = [{ comments: [{ text: "This a comment for case law 184", id: "184" }], news: [{ text: "This news 12 ", id: "12" }, { text: "This news 13 ", id: "13" }], children: [{ comments: [{ text: "This a comment for case law 170", id: "170" }], news: [{ text: "This news 22 ", id: "22" }, { text: "This news 33", id: "33" }], children: [{ comments: [{ text: "This a comment for case law 183", id: "183" }], news: [{ text: "This news 122 ", id: "122" }, { text: "This news 133 ", id: "133" }] }] }] }] result = merge(tree1, tree2); console.log(result);

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