トップ JavaScriptに関する質問表データをツリー構造のjsonに変換したい

編集履歴

回答編集履歴

テキスト修正

2020/06/20 10:08

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -403,3 +403,43 @@
 となってしまい、B-2　には、二つの親、A-1　と A-2 があることになってしまいます。ですが、先のstackoverflow の投稿では、各ノードの親は、木構造の定義に沿って、（最大で）一個であるようなノードの一次元配列を木構造化するコードでした。これを踏まえて、それでも[ベストアンサー](https://stackoverflow.com/a/18018037) の `function list_to_tree(list)` を使おうとすると、id として A-1やB-2だったりの文字列はそのまま使えず、「A-1 が親のB-1 と、A-2が親のB-2とは、別物である」という考え方を採り入れて、それらに異なる id を設ける必要があり、これはけっこう煩雑な作業となりそうです。
+### 追記4
+上記の追記3で書いた、[function list_to_tree(list)](https://stackoverflow.com/a/18018037) を使うための
+> 「A-1 が親のB-1 と、A-2が親のB-2とは、別物である」という考え方を採り入れて、それらに異なる id
+を実装したコード例を挙げておきます。以下になります。（※ `list_to_tree(list)` は、そのままコピペしてきたもので、手を加えていません）
+- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/zYrNQzv?editors=0012](https://codepen.io/jun68ykt/pen/zYrNQzv?editors=0012)
+具体的には、たとえば、`[ 'A-2', 'B-2', 'C-10' ]` の `C-10` から、以下のようなノードオブジェクトを作成します。
+```javascript
+{ id: 'A-2/B-2/C-10', parentId: 'A-2/B-2', label: 'C-10' }
+```
+また、トップレベルの `A-2` からは、 parentId に文字列の `"0"` を入れた、以下のオブジェクトを作成します。
+```javascript
+{ id: 'A-2', parentId: '0', label: 'A-2' }
+```
+上記のようなオブジェクトを要素とする一次元配列を、元のテーブルデータから作成すると、その配列を [function list_to_tree(list)](https://stackoverflow.com/a/18018037) に渡すことができて、木構造化した配列を返してくれますので、それをさらに望ましい形にフォーマットして結果を得ています。

テキスト修正

2020/06/20 10:08

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -343,3 +343,63 @@
 - **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/oNbBaKE?editors=0012](https://codepen.io/jun68ykt/pen/oNbBaKE?editors=0012)
+### 追記3
+先に書いた、追記1 で、stackoverflow　の投稿 [Build tree array from flat array in javascript](https://stackoverflow.com/questions/18017869) を挙げましたが、これの回答の中の[ベストアンサー](https://stackoverflow.com/a/18018037) の `function list_to_tree(list)` を使えそうか、ちょっとスパイクしてみましたが、問題があり簡単にはできそうもなかったです。その説明を以下、記載します。
+元のテーブルのデータ配列は
+```
+[
+  [ '列A', '列B', '列C' ],
+  [ 'A-1', 'B-1', 'C-1' ],
+  [ 'A-1', 'B-1', 'C-2' ],
+  [ 'A-1', 'B-2', 'C-3' ],
+  [ 'A-1', 'B-2', 'C-4' ],
+  [ 'A-2', 'B-3', 'C-5' ],
+  [ 'A-2', 'B-3', 'C-6' ],
+  [ 'A-2', 'B-4', 'C-7' ],
+  [ 'A-2', 'B-4', 'C-8' ],
+  [ 'A-1', 'B-5', 'C-9' ],
+  [ 'A-2', 'B-2', 'C-10' ]
+]
+```
+というものですが、これのデータ行の３行目 `[ 'A-1', 'B-2', 'C-3' ]`  を、ツリー末端の子（葉）のほうから親のほうへ向かうパスとして読むと
+- C-3 の親は B-2 で、B-2 の親は A-1
+と読めるのですが、そうすると、最後の行の `[ 'A-2', 'B-2', 'C-10' ]` は
+- C-10 の親は B-2 で、B-2 の親は A-2
+となってしまい、B-2　には、二つの親、A-1　と A-2 があることになってしまいます。ですが、先のstackoverflow の投稿では、各ノードの親は、木構造の定義に沿って、（最大で）一個であるようなノードの一次元配列を木構造化するコードでした。これを踏まえて、それでも[ベストアンサー](https://stackoverflow.com/a/18018037) の `function list_to_tree(list)` を使おうとすると、id として A-1やB-2だったりの文字列はそのまま使えず、「A-1 が親のB-1 と、A-2が親のB-2とは、別物である」という考え方を採り入れて、それらに異なる id を設ける必要があり、これはけっこう煩雑な作業となりそうです。

テキスト修正

2020/06/20 08:02

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-いろいろなやり方がありそうですが、一例を回答します。以下の二次元配列 `tableData` から目的のJSONを得るコードを挙げます、
+いろいろなやり方がありそうですが、一例を回答します。以下の二次元配列 `tableData` から目的のJSONを得るコードを挙げます。
 ```javascript
@@ -34,7 +34,7 @@
 ```
-上記の配列`tableData`から、階層構造を復元したオブジェクトを作ります。その際に lodash の [_.set](https://lodash.com/docs/#set)を使います。
+上記の配列`tableData`から、階層構造を復元したオブジェクトを作ります。その際に lodash の [_.set](https://lodash.com/docs/#set) を使います。
@@ -270,7 +270,7 @@
-### 追記
+### 追記1

テキスト修正

2020/06/20 05:12

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -332,7 +332,7 @@
-const treeArray = tableData.slice(1).reduce((ary, row) => addRowToTree(ary, row), []);
+const treeArray = tableData.slice(1).reduce((tree, row) => addRowToTree(tree, row), []);

テキスト修正

2020/06/20 03:36

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -298,7 +298,7 @@
 const addRowToTree = (treeArray, row) => {
-  let ary = treeArray;
+  let list = treeArray;
   for (let i=0; i < row.length; ++ i) {
@@ -306,21 +306,21 @@
       const key = `列${row[i][0]}`;
-      let obj = ary.find(e => e[key] === row[i]);
+      let obj = list.find(e => e[key] === row[i]);
       if (!obj) {
         obj = { [key]: row[i], list: [] };
-        ary.push(obj);
+        list.push(obj);
       }
-      ary = obj.list;
+      list = obj.list;
     } else {
-      ary.push(row[i]);
+      list.push(row[i]);
     }

テキスト修正

2020/06/19 20:58

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -296,7 +296,7 @@
 ```javascript
-const addRow = (treeArray, row) => {
+const addRowToTree = (treeArray, row) => {
   let ary = treeArray;
@@ -332,7 +332,7 @@
-const treeArray = tableData.slice(1).reduce((ary, row) => addRow(ary, row), []);
+const treeArray = tableData.slice(1).reduce((ary, row) => addRowToTree(ary, row), []);

テキスト修正

2020/06/19 20:51

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -304,7 +304,7 @@
     if (i < row.length-1) {
-      const key = `列${row[i][0]}`
+      const key = `列${row[i][0]}`;
       let obj = ary.find(e => e[key] === row[i]);

テキスト修正

2020/06/19 20:47

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -283,3 +283,63 @@
 にいくつか出ています。ご質問にある表データの配列を加工して、上記に投稿されているいずれかの回答コードをベースにした階層化コードを作成する手もあるかもしれません。
+### 追記2
+オブジェクトを経由しない別案を作成しました。こちらは、どの階層においても、元のテーブルでの出現順にリストされます。
+```javascript
+const addRow = (treeArray, row) => {
+  let ary = treeArray;
+  for (let i=0; i < row.length; ++ i) {
+    if (i < row.length-1) {
+      const key = `列${row[i][0]}`
+      let obj = ary.find(e => e[key] === row[i]);
+      if (!obj) {
+        obj = { [key]: row[i], list: [] };
+        ary.push(obj);
+      }
+      ary = obj.list;
+    } else {
+      ary.push(row[i]);
+    }
+  }
+  return treeArray;
+};
+const treeArray = tableData.slice(1).reduce((ary, row) => addRow(ary, row), []);
+console.log(JSON.stringify(treeArray, null, 2));
+```
+- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/oNbBaKE?editors=0012](https://codepen.io/jun68ykt/pen/oNbBaKE?editors=0012)

テキスト修正

2020/06/19 20:43

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -108,56 +108,30 @@
 ```
-この`treeObj` から、目的の配列を得るための再帰関数 `treeObjToArray` と、これの中で使うソート用の比較関数 `keyCompare` を作成します。
+この`treeObj` から、目的の配列を得るための再帰関数 `treeObjToArray` を作成します。
-```javascript
+```javascript
-const keyCompare = (k1, k2) => {
+const treeObjToArray = obj => {
-  const ch1 = k1[0], ch2 = k2[0];
-  const n1 = +k1.substring(2), n2 = +k2.substring(2);
+  const entries = Object.entries(obj).sort(([k1], [k2]) => k1.substring(2) - k2.substring(2));
-  return ch1 !== ch2 ? ch1.localeCompare(ch2) : n1 - n2;
+  return entries.map(([k, v]) => ({
+      [`列${k[0]}`]: k,
+      list: Object.values(v)[0] ?
+        treeObjToArray(v) : Object.keys(v).sort((k1, k2) => k1.substring(2) - k2.substring(2))
+    })
+  );
 }
-```
-上記の `keyCompare` は、セルの文字列を以下のように順序づけます。
-`A-1` < `A-2` < `B-2` < `B-10` < `C-1`
-`treeObj` から、目的の配列を得るための再帰関数 `treeObjToArray`は以下です。
-```javascript
-const treeObjToArray = obj => {
-  const entries = Object.entries(obj).sort(([k1], [k2]) => keyCompare(k1, k2));
-  return entries.map(([k, v]) => ({
-      [`列${k[0]}`]: k,
-      list: Object.values(v)[0] ?
-        treeObjToArray(v) : Object.keys(v).sort((k1, k2) => keyCompare(k1, k2))
-    })
-  );
-}
 ```
 上記の`treeObjToArray` に `treeObj` を与えて、目的の配列 `treeArray` を得ます。
@@ -286,7 +260,7 @@
-- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/wvMgYMX?editors=0012](https://codepen.io/jun68ykt/pen/wvMgYMX?editors=0012)
+- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/KKVaGXj?editors=0012](https://codepen.io/jun68ykt/pen/KKVaGXj?editors=0012)

テキスト修正

2020/06/19 19:27

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -40,7 +40,7 @@
 ```javascript
-const treeObj = tableData.slice(1).reduce((o, path) => _(o).set(path, null).value(), {});
+const treeObj = tableData.slice(1).reduce((obj, path) => _(obj).set(path, null).value(), {});
 ```

テキスト修正

2020/06/19 19:18

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,335 +2,291 @@
-いろいろなやり方がありそうですが、一例を挙げておきます。
-この回答では、以下のような、空白文字で区切られたテキストとして与えられた表データから、目的のJSONを得るコードを挙げます。
-```javascript
-const tableText =
-  `列A 	列B 	列C
-   A-1 	B-1 	C-1
-   A-1 	B-1 	C-2
-   A-1 	B-2 	C-3
-   A-1 	B-2 	C-4
-   A-2 	B-3 	C-5
-   A-2 	B-3 	C-6
-   A-2 	B-4 	C-7
-   A-2 	B-4 	C-8
-   A-1 	B-5 	C-9
-   A-2 	B-2 	C-10`;
-```
-以下によって、各セルの値の配列を得ます。
-```javascript
-const tableData = tableText.split('\n').map(str => str.trim().split(/\s+/)).splice(1);
-```
-上記によって、 `tableData` は、以下のような二次元配列になります。
-```javascript
+いろいろなやり方がありそうですが、一例を回答します。以下の二次元配列 `tableData` から目的のJSONを得るコードを挙げます、
+```javascript
+const tableData = [
+  [ '列A', '列B', '列C' ],
+  [ 'A-1', 'B-1', 'C-1' ],
+  [ 'A-1', 'B-1', 'C-2' ],
+  [ 'A-1', 'B-2', 'C-3' ],
+  [ 'A-1', 'B-2', 'C-4' ],
+  [ 'A-2', 'B-3', 'C-5' ],
+  [ 'A-2', 'B-3', 'C-6' ],
+  [ 'A-2', 'B-4', 'C-7' ],
+  [ 'A-2', 'B-4', 'C-8' ],
+  [ 'A-1', 'B-5', 'C-9' ],
+  [ 'A-2', 'B-2', 'C-10' ]
+];
+```
+上記の配列`tableData`から、階層構造を復元したオブジェクトを作ります。その際に lodash の [_.set](https://lodash.com/docs/#set)を使います。
+```javascript
+const treeObj = tableData.slice(1).reduce((o, path) => _(o).set(path, null).value(), {});
+```
+上記によって、`treeObj` に下記のようなオブジェクトが得られます。
+```javascript
+{
+  "A-1": {
+    "B-1": {
+      "C-1": null,
+      "C-2": null
+    },
+    "B-2": {
+      "C-3": null,
+      "C-4": null
+    },
+    "B-5": {
+      "C-9": null
+    }
+  },
+  "A-2": {
+    "B-3": {
+      "C-5": null,
+      "C-6": null
+    },
+    "B-4": {
+      "C-7": null,
+      "C-8": null
+    },
+    "B-2": {
+      "C-10": null
+    }
+  }
+}
+```
+この`treeObj` から、目的の配列を得るための再帰関数 `treeObjToArray` と、これの中で使うソート用の比較関数 `keyCompare` を作成します。
+```javascript
+const keyCompare = (k1, k2) => {
+  const ch1 = k1[0], ch2 = k2[0];
+  const n1 = +k1.substring(2), n2 = +k2.substring(2);
+  return ch1 !== ch2 ? ch1.localeCompare(ch2) : n1 - n2;
+}
+```
+上記の `keyCompare` は、セルの文字列を以下のように順序づけます。
+`A-1` < `A-2` < `B-2` < `B-10` < `C-1`
+`treeObj` から、目的の配列を得るための再帰関数 `treeObjToArray`は以下です。
+```javascript
+const treeObjToArray = obj => {
+  const entries = Object.entries(obj).sort(([k1], [k2]) => keyCompare(k1, k2));
+  return entries.map(([k, v]) => ({
+      [`列${k[0]}`]: k,
+      list: Object.values(v)[0] ?
+        treeObjToArray(v) : Object.keys(v).sort((k1, k2) => keyCompare(k1, k2))
+    })
+  );
+}
+```
+上記の`treeObjToArray` に `treeObj` を与えて、目的の配列 `treeArray` を得ます。
+```javascript
+const treeArray = treeObjToArray(treeObj);
+console.log(JSON.stringify(treeArray, null, 2));
+```
+上記によって、以下が出力されます。
+```json
 [
+  {
+    "列A": "A-1",
+    "list": [
+      {
-  [ 'A-1', 'B-1', 'C-1' ],
+        "列B": "B-1",
+        "list": [
+          "C-1",
+          "C-2"
+        ]
+      },
+      {
-  [ 'A-1', 'B-1', 'C-2' ],
+        "列B": "B-2",
+        "list": [
+          "C-3",
+          "C-4"
+        ]
+      },
+      {
+        "列B": "B-5",
+        "list": [
+          "C-9"
+        ]
+      }
+    ]
+  },
+  {
+    "列A": "A-2",
+    "list": [
+      {
-  [ 'A-1', 'B-2', 'C-3' ],
+        "列B": "B-2",
+        "list": [
+          "C-10"
+        ]
+      },
+      {
+        "列B": "B-3",
+        "list": [
+          "C-5",
+          "C-6"
+        ]
+      },
+      {
-  [ 'A-1', 'B-2', 'C-4' ],
+        "列B": "B-4",
-  [ 'A-2', 'B-3', 'C-5' ],
+        "list": [
-  [ 'A-2', 'B-3', 'C-6' ],
-  [ 'A-2', 'B-4', 'C-7' ],
+          "C-7",
-  [ 'A-2', 'B-4', 'C-8' ],
+          "C-8"
-  [ 'A-1', 'B-5', 'C-9' ],
+        ]
+      }
-  [ 'A-2', 'B-2', 'C-10' ]
+    ]
+  }
 ]
 ```
-上記の配列`tableData`から、階層構造を復元したオブジェクトを作ります。その際に lodash の [_.set](https://lodash.com/docs/#set)を使います。
-```javascript
-const treeObj = tableData.reduce((o, path) => _(o).set(path, null).value(), {});
-```
-上記によって、`treeObj` に下記のようなオブジェクトが得られます。
-```javascript
-{
-  "A-1": {
-    "B-1": {
-      "C-1": null,
-      "C-2": null
-    },
-    "B-2": {
-      "C-3": null,
-      "C-4": null
-    },
-    "B-5": {
-      "C-9": null
-    }
-  },
-  "A-2": {
-    "B-3": {
-      "C-5": null,
-      "C-6": null
-    },
-    "B-4": {
-      "C-7": null,
-      "C-8": null
-    },
-    "B-2": {
-      "C-10": null
-    }
-  }
-}
-```
-この`treeObj` から、目的の配列を得るための再帰関数 `treeObjToArray` と、これの中で使うソート用の比較関数 `keyCompare` を作成します。
-```javascript
-const keyCompare = (k1, k2) => {
-  const ch1 = k1[0], ch2 = k2[0];
-  const n1 = +k1.substring(2), n2 = +k2.substring(2);
-  return ch1 !== ch2 ? ch1.localeCompare(ch2) : n1 - n2;
-}
-```
-上記の `keyCompare` は、セルの文字列を以下のように順序づけます。
-`A-1` < `A-2` < `B-2` < `B-10` < `C-1`
-`treeObj` から、目的の配列を得るための再帰関数 `treeObjToArray`は以下です。
-```javascript
-const treeObjToArray = obj => {
-  const entries = Object.entries(obj).sort(([k1], [k2]) => keyCompare(k1, k2));
-  return entries.map(([k, v]) => ({
-      [`列${k[0]}`]: k,
-      list: Object.values(v)[0] ?
-        treeObjToArray(v) : Object.keys(v).sort((k1, k2) => keyCompare(k1, k2))
-    })
-  );
-}
-```
-上記の`treeObjToArray` に `treeObj` を与えて、目的の配列 `treeArray` を得ます。
-```javascript
-const treeArray = treeObjToArray(treeObj);
-console.log(JSON.stringify(treeArray, null, 2));
-```
-上記によって、以下が出力されます。
-```json
-[
-  {
-    "列A": "A-1",
-    "list": [
-      {
-        "列B": "B-1",
-        "list": [
-          "C-1",
-          "C-2"
-        ]
-      },
-      {
-        "列B": "B-2",
-        "list": [
-          "C-3",
-          "C-4"
-        ]
-      },
-      {
-        "列B": "B-5",
-        "list": [
-          "C-9"
-        ]
-      }
-    ]
-  },
-  {
-    "列A": "A-2",
-    "list": [
-      {
-        "列B": "B-2",
-        "list": [
-          "C-10"
-        ]
-      },
-      {
-        "列B": "B-3",
-        "list": [
-          "C-5",
-          "C-6"
-        ]
-      },
-      {
-        "列B": "B-4",
-        "list": [
-          "C-7",
-          "C-8"
-        ]
-      }
-    ]
-  }
-]
-```
-- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/JjGEBgx?editors=0012](https://codepen.io/jun68ykt/pen/JjGEBgx?editors=0012)
+- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/wvMgYMX?editors=0012](https://codepen.io/jun68ykt/pen/wvMgYMX?editors=0012)

テキスト修正

2020/06/19 19:03

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -176,9 +176,7 @@
-`A-1` < `A-2` < `B-1` < `B-10` < `C-1`
+`A-1` < `A-2` < `B-2` < `B-10` < `C-1`
@@ -337,3 +335,21 @@
 以上参考になれば幸いです。
+### 追記
+別案を検討する際の参考情報です。一次元のオブジェクト配列から、オブジェクト間の階層構造を復元した配列に変換するコードの例は
+- stackoverflow [Build tree array from flat array in javascript](https://stackoverflow.com/questions/18017869)
+にいくつか出ています。ご質問にある表データの配列を加工して、上記に投稿されているいずれかの回答コードをベースにした階層化コードを作成する手もあるかもしれません。