71262


下記のjsonのchidrenをすべて表示させたいのですが、どうすればよいでしょうか。  
childrenの中にchildrenがあり、childrenの個数が可変でも対応させたいです。

[code]

    {
        "children": [
        {
            "contents": {
                "A": 0,
                "B": 1,
                "C": 2
            },
                "children": [
                {
                    "children": [],
                    "name": "test03",
                    "id": 3
                },
                {
                    "children": [],
                    "name": "test04",
                    "id": 4
                }
                ],
                "name": "test01",
                "id": 1
        },
        {
            "contents": {
                "A": 0,
                "B": 1,
                "C": 2
            },
            "children": [
            {
                "children": [],
                "name": "test05",
                "id": 5
            },
            {
                "children": [],
                "name": "test06",
                "id": 6
            }
            ],
            "name": "test02",
            "id": 2
        }
        ]
    }
    
[/code]

得たい結果

[code]

     "name": "test01"
     "name": "test02"
     "name": "test03"
     "name": "test04"
     "name": "test05"
     "name": "test06"
    
[/code]


CC BY-SA 4.0
2020-10-16T08:55:54.633
71249
2020-10-17T13:03:16.897
2020-10-16T11:49:59.273
3060
42340
question
javascript json array
連想配列と配列が組み合わさっているものの中身を表示させたい


上記のJSONオブジェクト`{"children":
[,,,]}`からキーが`name`のときの値を取得したいとの理解です。この目標を達成させるために次の２パターンを提案させていただきます。

### パターン1

このパターンでは、getValuesの関数を用意して、その中でオブジェクト内をスキャンしています。

[code]

    const getValues = (data, contents = []) => {
      for (let key in data) {
        if (key === "name") contents.push({[key]: data[key]});
        if (typeof data[key] === "object") getValues(data[key], contents);
      }
      return contents;
    }
      
    const obj = {"children":[{"contents":{"A":0,"B":1,"C":2},"children":[{"children":[],"name":"test03","id":3},{"children":[],"name":"test04","id":4}],"name":"test01","id":1},{"contents":{"A":0,"B":1,"C":2},"children":[{"children":[],"name":"test05","id":5},{"children":[],"name":"test06","id":6}],"name":"test02","id":2}]};
    const res = getValues(obj);
    res.sort((a, b) => a.name > b.name ? 1 : -1);
    console.log(res)
[/code]

### パターン2

このパターンでは、[JSON.parse](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)を使ってオブジェクト内をスキャンしています。

[code]

    const obj = {"children":[{"contents":{"A":0,"B":1,"C":2},"children":[{"children":[],"name":"test03","id":3},{"children":[],"name":"test04","id":4}],"name":"test01","id":1},{"contents":{"A":0,"B":1,"C":2},"children":[{"children":[],"name":"test05","id":5},{"children":[],"name":"test06","id":6}],"name":"test02","id":2}]};
    const res = [];
    JSON.parse(JSON.stringify(obj), (key, value) => {
      if (key == "name") res.push({[key]: value});
    });
    res.sort((a, b) => a.name > b.name ? 1 : -1);
    console.log(res)
[/code]

### Note

  * 実際の`name`の値については分かりませんが、入力値から提示された結果に合わせるために、ここでは`res.sort((a, b) => a.name > b.name ? 1 : -1)`を用意しました。もしも不要な場合は削除してください。


CC BY-SA 4.0
2020-10-16T11:55:02.237
71255
2020-10-16T11:55:02.237
19460
71249
answer


提示されているJSONは、多分木に分類される[木構造](https://ja.wikipedia.org/wiki/%E6%9C%A8%E6%A7%8B%E9%80%A0_\(%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0\))です。

もし表示する順番が 01 から 06 の昇順である必要があるなら、幅優先探索をするか、深さ優先探索で`name`を集めてからソートする必要があります。

幅優先探索だと以下のようなコードになるでしょう。`root` が JSON をパーズした結果のオブジェクトとします。

[code]

    function breadthFirstTraverse(root, callback) {
      const queue = [root];
      while (queue.length > 0) {
        const node = queue.shift();
        node.name && callback(node);
        queue.push(...node.children);
      }
    }
    
    breadthFirstTraverse(root, node => {
      console.log(`name: ${node.name}`);
    });
    
[/code]

深さ優先探索で表示順を気にしないなら少々シンプルなコードになります。

[code]

    function depthFirstTraverse(node, callback) {
      node.name && callback(node);
      node.children.forEach(child => depthFirstTraverse(child, callback));
    }
    
    depthFirstTraverse(root, node => {
      console.log(`"name": "${node.name}"`);
    });
    
[/code]


CC BY-SA 4.0
2020-10-16T17:18:08.727
71262
2020-10-17T13:03:16.897
2020-10-17T13:03:16.897
3475
3475
71249
answer