javascript - 循环遍历对象和数组的对象

Question

我有以下具有嵌套对象和数组的对象：

{
  "children":[
    {
      "id":"9737ea0a-fa6f-42e1-bf16-a10af80e4d50",
      "isCriteria":false,
      "name":"Domain 1",
      "children":[
        {
          "id":"e06d1940-b480-48e2-8e1a-2fe2a3910dfd",
          "children":[
            {
              "id":"30995e1e-7195-4d01-85bf-c621398796cc",
              "children":[
                {
                  "id":"2969e48d-615e-4774-b92e-cbce768503ff",
                  "children":[

                  ],
                  "isCriteria":true,
                  "name":"Criteria 1",
                  "questionType":"Yes/NO",
                  "importance":3
                }
              ],
              "isCriteria":false,
              "name":"sub domain 1 - 2"
            }
          ],
          "isCriteria":false,
          "name":"Sub domain 1"
        },
        {
          "id":"c5b36f02-e765-4d93-970c-6faca94c28c1",
          "children":[
            {
              "id":"6807ea4f-fb14-4d68-98f4-b3bf4c601e5c",
              "children":[

              ],
              "isCriteria":true,
              "name":"Criteria 2",
              "questionType":"5",
              "importance":"1"
            }
          ],
          "isCriteria":false,
          "name":"sub domain 2"
        }
      ]
    }
  ]
}

我想循环遍历它，直到我到达尾巴。并用其他数据编辑那个尾巴，因为.. in不会工作，因为我有数组

标签： javascript

Answer 1

您可以轻松地递归地执行此操作。

function recurse(node, level=0) {
  if (node == null) return; // Check for null, exit
  console.log(node.id == null ? 'root' : node.id); // Print the ID
  if (node.children) node.children.forEach(child => recurse(child, level + 1)); // Hand off to children
}

下面代码的示例输出。

root
↓ ID: 9737ea0a-fa6f-42e1-bf16-a10af80e4d50
    ↳ Name: Domain 1
  ↓ ID: e06d1940-b480-48e2-8e1a-2fe2a3910dfd
      ↳ Name: Sub domain 1
    ↓ ID: 30995e1e-7195-4d01-85bf-c621398796cc
        ↳ Name: sub domain 1 - 2
      ↳ ID: 2969e48d-615e-4774-b92e-cbce768503ff
          ↳ Name: Criteria 1
          ↳ Type: Yes/NO
          ↳ Importance: 3
  ↓ ID: c5b36f02-e765-4d93-970c-6faca94c28c1
      ↳ Name: sub domain 2
    ↳ ID: 6807ea4f-fb14-4d68-98f4-b3bf4c601e5c
        ↳ Name: Criteria 2
        ↳ Type: 5
        ↳ Importance: 1

const data = loadData();

recurse(data);

function recurse(node, level=0) {
  if (node == null) return;
  let symbol = node.isCriteria ? '↳' : '↓';
  let paddingOuter = ''.padStart((level - 1) * 2, ' ');
  let paddingInner = ''.padStart((level + 1) * 2, ' ');
  console.log(node.id == null ? 'root' : paddingOuter + symbol + ' ID: ' +  node.id);
  if (node.name) console.log(paddingInner + '↳ Name: ' + node.name);
  if (node.isCriteria) {
    console.log(paddingInner + '↳ Type: ' + node.questionType);
    console.log(paddingInner + '↳ Importance: ' + node.importance);
  }
  if (node.children) node.children.forEach(child => recurse(child, level + 1));
}

function loadData() {
  return {
    "children": [{
      "id": "9737ea0a-fa6f-42e1-bf16-a10af80e4d50",
      "isCriteria": false,
      "name": "Domain 1",
      "children": [{
          "id": "e06d1940-b480-48e2-8e1a-2fe2a3910dfd",
          "children": [{
            "id": "30995e1e-7195-4d01-85bf-c621398796cc",
            "children": [{
              "id": "2969e48d-615e-4774-b92e-cbce768503ff",
              "children": [

              ],
              "isCriteria": true,
              "name": "Criteria 1",
              "questionType": "Yes/NO",
              "importance": 3
            }],
            "isCriteria": false,
            "name": "sub domain 1 - 2"
          }],
          "isCriteria": false,
          "name": "Sub domain 1"
        },
        {
          "id": "c5b36f02-e765-4d93-970c-6faca94c28c1",
          "children": [{
            "id": "6807ea4f-fb14-4d68-98f4-b3bf4c601e5c",
            "children": [

            ],
            "isCriteria": true,
            "name": "Criteria 2",
            "questionType": "5",
            "importance": "1"
          }],
          "isCriteria": false,
          "name": "sub domain 2"
        }
      ]
    }]
  };
}

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

编辑数据

如果你需要编辑一个特定的节点，你可以通过它的 ID 来定位它并给它分配一个“新”的对象。它将覆盖现有属性并添加新属性。

function editNode(node, id, payload={}, found=false) {
  if (node == null || id == null || found === true) return;
  if (node.id === id) {
    Object.assign(node, payload);
    found = true;
  }
  if (found === false && node.children) {
    node.children.forEach(child => editNode(child, id, payload, found));
  }
}

 ↳ ID: 6807ea4f-fb14-4d68-98f4-b3bf4c601e5c
     ↳ Name: Criteria 2
     ↳ Question Type: 99 <-- MODIFIED BELOW
     ↳ Importance: 1

const data = loadData();

editNode(data, '6807ea4f-fb14-4d68-98f4-b3bf4c601e5c', { questionType : 99 })
recurse(data);

function recurse(node, level=0) {
  if (node == null) return;
  let symbol = node.isCriteria ? '↳' : '↓';
  let paddingOuter = ''.padStart((level - 1) * 2, ' ');
  let paddingInner = ''.padStart((level + 1) * 2, ' ');
  console.log(node.id == null ? 'root' : paddingOuter + symbol + ' ID: ' +  node.id);
  if (node.name) console.log(paddingInner + '↳ Name: ' + node.name);
  if (node.isCriteria) {
    console.log(paddingInner + '↳ Question Type: ' + node.questionType);
    console.log(paddingInner + '↳ Importance: ' + node.importance);
  }
  if (node.children) node.children.forEach(child => recurse(child, level + 1));
}

function editNode(node, id, payload={}, found=false) {
  if (node == null || id == null || found === true) return;
  if (node.id === id) {
    Object.assign(node, payload);
    found = true;
  }
  if (found === false && node.children) {
    node.children.forEach(child => editNode(child, id, payload, found));
  }
}

function loadData() {
  return {
    "children": [{
      "id": "9737ea0a-fa6f-42e1-bf16-a10af80e4d50",
      "isCriteria": false,
      "name": "Domain 1",
      "children": [{
          "id": "e06d1940-b480-48e2-8e1a-2fe2a3910dfd",
          "children": [{
            "id": "30995e1e-7195-4d01-85bf-c621398796cc",
            "children": [{
              "id": "2969e48d-615e-4774-b92e-cbce768503ff",
              "children": [

              ],
              "isCriteria": true,
              "name": "Criteria 1",
              "questionType": "Yes/NO",
              "importance": 3
            }],
            "isCriteria": false,
            "name": "sub domain 1 - 2"
          }],
          "isCriteria": false,
          "name": "Sub domain 1"
        },
        {
          "id": "c5b36f02-e765-4d93-970c-6faca94c28c1",
          "children": [{
            "id": "6807ea4f-fb14-4d68-98f4-b3bf4c601e5c",
            "children": [

            ],
            "isCriteria": true,
            "name": "Criteria 2",
            "questionType": "5",
            "importance": "1"
          }],
          "isCriteria": false,
          "name": "sub domain 2"
        }
      ]
    }]
  };
}

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