JavaScript配列の効率的な整形方法

Question

Webアプリのコメント返信用の配列を作成するために、JavaScriptで配列の整形をしています。

効率的な整形方法を是非ともご教授頂きたいです。
よろしくお願いいたします。

下記の配列test_listを配列new_test_listに変換したいと思っています。

■変換ルール

parentには親のidが格納されています。
parentに数字が格納されている場合は、親idのchildren配列に要素が格納されます。
子がいる限りどんどんネストしていきます。(コメントの返信を想定)
parentがnullの場合は、親はいません。

  const test_list = [
    {
      id: 1,
      content: 'test1',
      parent: null,
    },
    {
      id: 2,
      content: 'test2',
      parent: null,
    },
    {
      id: 3,
      content: 'test3',
      parent: 1,
    },
    {
      id: 4,
      content: 'test4',
      parent: 3,
    },
    {
      id: 5,
      content: 'test5',
      parent: 1,
    },
  ]

  const new_test_list = [
    {
      id: 1,
      content: 'test1',
      children: [
        {
          id: 3,
          content: 'test3',
          children: [
            {
              id: 4,
              content: 'test4',
              children: [],
            },
          ],
        },
        {
          id: 5,
          content: 'test5',
          children: [],
        }
      ],
    },
    {
      id: 2,
      content: 'test2',
      children: [],
    },
  ]

是非ともよろしくお願いいたします。

Answer 1

効率的かは分からんし、データによってはうまくいかないけど、とりあえず

let obj = {};
for (let o of test_list) {
    o['children'] = []
    obj[o['id']] = o
}

for (let o of test_list) {
    if (o['parent'] != null) {
        let p = o['parent']
        delete o['parent']
        obj[p]['children'].push(o)
    }
}

let new_test_list = [];
for (let k in obj) {
    if ('parent' in obj[k]) {
        delete obj[k]['parent']
        new_test_list.push(obj[k])
    }
}

Comments

[haruyasu]

ありがとうございます。
勉強になります。

[takasima20]

(･∀･)b

Answer 2

とりま、こないな感じかのう。

// 与えられた配列要素から、id と各要素をコピーしたオブジェクトのMapを作成
const nodesMap = new Map(test_list.map(node => [node.id, {...node, children: [] }]));

// 上記で作成したマップの値である各ノードについて、その親ノードのchildrenに追加するループ
for (const node of nodesMap.values()) {
  const parentNode = nodesMap.get(node.parent);
  if (parentNode) {
    parentNode.children.push(node);
  }
}

// parentがnullのノードの配列としてnew_test_listを得る。
const new_test_list = Array.from(nodesMap.values()).filter(node => !node.parent);

// 各ノードのparentプロパティが不要になったので削除
(function deleteParentRecursively(list) {
  list.forEach(node => {
    delete node.parent;
    if (node.children.length)
      deleteParentRecursively(node.children);
  });
})(new_test_list);

console.log(JSON.stringify(new_test_list, null, 2));

出力結果：

[
  {
    'id': 1,
    'content': 'test1',
    'children': [
      {
        'id': 3,
        'content': 'test3',
        'children': [
          {
            'id': 4,
            'content': 'test4',
            'children': []
          }
        ]
      },
      {
        'id': 5,
        'content': 'test5',
        'children': []
      }
    ]
  },
  {
    'id': 2,
    'content': 'test2',
    'children': []
  }
]

➡ サンプル

---

追記：

ひとつ追記しておきます。

上のコードでは、ツリーを構築した後に、各ノードの parent プロパティを削除するために、再帰関数を使って

// 各ノードのparentプロパティが不要になったので削除
(function deleteParentRecursively(list) {
  list.forEach(node => {
    delete node.parent;
    if (node.children.length)
      deleteParentRecursively(node.children);
  });
})(new_test_list);

としていますが、ここは再帰を使わずとも、もう一度nodesMapの各キーに対する値のすべてを for ･･･ of ･･･ でループさせれば、全ノードを走査できるので、以下でよかったです。

// 各ノードのparentプロパティが不要になったので削除
for (const node of nodesMap.values()) {
  delete node.parent;
}

➡ サンプル

（ただし、このツリー構築作業用のマップnodesMapが無くなってしまった後に、ツリーの全ノードをたどるには、deleteParentRecursivelyでやっているような再帰が分かり易いと思います。）

Comments

[haruyasu]

期待の配列に整形をすることができました。
勉強になります。
ありがとうございました。

[退会済みユーザー]

おおきに〜
実は、完全に白紙から考えてコードを書いたわけではありませんで、
自分がもしこういうのを業務でやらなければならないとしたら、

いかに自分で書かないで済ませるか？

を考えてstackoverflowなどをあたったりするんですが、今回の場合も探してみると、こんな質問があり回答も数多く寄せられています。

Build tree array from flat array in javascript
https://stackoverflow.com/questions/18017869/build-tree-array-from-flat-array-in-javascript

私の回答は、上記のstackoverflowの回答のうち一番上のベストアンサーのものを参考にしており、マップにオブジェクトではなくMapを使ったり、for ( i=i ; ･･･; ･･･ ) ではなく for ( ･･･ of ･･･ ) を使ったりしています。

他にも、こちらの回答
https://stackoverflow.com/a/34792287
の、listToTree　は node module になっており、これを使うと一発でした。

https://codesandbox.io/s/361417-si-zygg7

ただし、ツリー構築後のparentプロパティ削除まではやってくれないので、それは自分でやらないとですが。