如何在 Angular 中删除此 JSON？

Question

我有一个 JSON，我需要从中剥离每个子文件夹的名称和位置值，以从 JSON 中的 ngx-treeview 中描绘文件夹结构 Angular。我只想拥有子文件夹，包括子文件夹中的模板。由于 JSON 对象的结构并非在所有地方都完全匹配并且不是同质的。如何将子文件夹值动态推送到 JSON 中确切文件夹结构中的树视图 (ngx-treeview)？

ngx-treeview JSON 应该看起来像这样：

templates = new TreeviewItem({
  text: "Abrechnung",
  value: 1,
  children: [
    {
      text: "Fahrtkosten",
      value: 11,
    },
    {
      text: "Lohn",
      value: 12,
    },
  ],
});

我的JSON:

{
  "soap:Envelope": {
    "soap:Body": {
      "ns2:getTemplateTreeResponse": {
        "return": {
          "subFolders": {
            "name": "Vorlagen",
            "description": "",
            "subFolders": {
              "name": "VorlagenB",
              "description": "",
              "subFolders": [
                {
                  "name": "Abrechnung",
                  "description": "",
                  "subFolders": [
                    {
                      "name": "Fahrtkosten",
                      "description": "",
                      "documentTypes": [
                        {
                          "fullName": "\library\MVP\Vorlagen\Fahrtkostenabrechnung.template",
                          "description": "",
                          "metadata": ""
                        },
                        {
                          "fullName": "\library\MVP\Vorlagen\Fahrtkostenzusatz.template",
                          "description": "",
                          "metadata": ""
                        }
                      ]
                    },
                    {
                      "name": "Lohn",
                      "description": "",
                      "documentTypes": [
                        {
                          "fullName": "\library\MVP\Vorlagen\Gehaltsabrechnung.template",
                          "description": "",
                          "metadata": ""
                        },
                        {
                          "fullName": "\library\MVP\Vorlagen\Lohnbescheid.template",
                          "description": "",
                          "metadata": ""
                        }
                      ]
                    }
                  ],
                  "documentTypes": [
                    {
                      "fullName": "\library\MVP\Vorlagen\Fahrtkostenabrechnung.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\Fahrtkostenzusatz.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\Gehaltsabrechnung.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\Lohnbescheid.template",
                      "description": "",
                      "metadata": ""
                    }
                  ]
                },
                {
                  "name": "Datenschutz",
                  "description": "",
                  "subFolders": [
                    {
                      "name": "Datenschutzbeauftragter",
                      "description": "",
                      "documentTypes": [
                        {
                          "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungHD.template",
                          "description": "",
                          "metadata": ""
                        },
                        {
                          "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungXD.template",
                          "description": "",
                          "metadata": ""
                        }
                      ]
                    },
                    {
                      "name": "Datenschutzerklärung",
                      "description": "",
                      "documentTypes": [
                        {
                          "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungKD.template",
                          "description": "",
                          "metadata": ""
                        },
                        {
                          "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungMA.template",
                          "description": "",
                          "metadata": ""
                        }
                      ]
                    }
                  ],
                  "documentTypes": [
                    {
                      "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungHD.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungKD.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungMA.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungXD.template",
                      "description": "",
                      "metadata": ""
                    }
                  ]
                },
                {
                  "name": "Mitarbeiterinfos",
                  "description": "",
                  "subFolders": {
                    "name": "Urlaub",
                    "description": "",
                    "documentTypes": [
                      {
                        "fullName": "\library\MVP\Template.template",
                        "description": "",
                        "metadata": ""
                      },
                      {
                        "fullName": "\library\MVP\Vorlagen\Urlaubsantragbescheid.template",
                        "description": "",
                        "metadata": ""
                      }
                    ]
                  },
                  "documentTypes": [
                    {
                      "fullName": "\library\MVP\Template.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\Urlaubsantragbescheid.template",
                      "description": "",
                      "metadata": ""
                    }
                  ]
                },
                {
                  "name": "Sonstiges",
                  "description": "",
                  "subFolders": [
                    {
                      "name": "Freitext Briefe",
                      "description": "",
                      "documentTypes": [
                        {
                          "fullName": "\library\MVP\Vorlagen\Anschreiben1.template",
                          "description": "",
                          "metadata": ""
                        },
                        {
                          "fullName": "\library\MVP\Vorlagen\Anschreiben2.template",
                          "description": "",
                          "metadata": ""
                        }
                      ]
                    },
                    {
                      "name": "Rückfragen",
                      "description": "",
                      "documentTypes": [
                        {
                          "fullName": "\library\MVP\Vorlagen\Testvorlage.template",
                          "description": "",
                          "metadata": ""
                        },
                        {
                          "fullName": "\library\MVP\Vorlagen\TestvorlageRgfrage.template",
                          "description": "",
                          "metadata": ""
                        }
                      ]
                    }
                  ],
                  "documentTypes": [
                    {
                      "fullName": "\library\MVP\Vorlagen\Anschreiben1.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\Anschreiben2.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\Testvorlage.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\TestvorlageRgfrage.template",
                      "description": "",
                      "metadata": ""
                    }
                  ]
                },
                {
                  "name": "Urlaub",
                  "description": "",
                  "subFolders": {
                    "name": "Urlaubsantrag",
                    "description": "",
                    "documentTypes": [
                      {
                        "fullName": "\library\MVP\Vorlagen\Urlaubsanfrage.template",
                        "description": "",
                        "metadata": ""
                      },
                      {
                        "fullName": "\library\MVP\Vorlagen\Urlaubsantrag.template",
                        "description": "",
                        "metadata": ""
                      }
                    ]
                  },
                  "documentTypes": [
                    {
                      "fullName": "\library\MVP\Vorlagen\Urlaubsanfrage.template",
                      "description": "",
                      "metadata": ""
                    },
                    {
                      "fullName": "\library\MVP\Vorlagen\Urlaubsantrag.template",
                      "description": "",
                      "metadata": ""
                    }
                  ]
                }
              ],
              "documentTypes": [
                {
                  "fullName": "\library\MVP\Vorlagen\Anschreiben1.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Anschreiben2.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungHD.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungKD.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungMA.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungXD.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Fahrtkostenabrechnung.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Fahrtkostenzusatz.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Gehaltsabrechnung.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Lohnbescheid.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Template.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Testvorlage.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\TestvorlageRgfrage.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Urlaubsanfrage.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Urlaubsantrag.template",
                  "description": "",
                  "metadata": ""
                },
                {
                  "fullName": "\library\MVP\Vorlagen\Urlaubsantragbescheid.template",
                  "description": "",
                  "metadata": ""
                }
              ]
            },
            "documentTypes": [
              {
                "fullName": "\library\MVP\Vorlagen\Anschreiben1.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Anschreiben2.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungHD.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungKD.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungMA.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\DatenschutzerklärungXD.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Fahrtkostenabrechnung.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Fahrtkostenzusatz.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Gehaltsabrechnung.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Lohnbescheid.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Template.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Testvorlage.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\TestvorlageRgfrage.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Urlaubsanfrage.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Urlaubsantrag.template",
                "description": "",
                "metadata": ""
              },
              {
                "fullName": "\library\MVP\Vorlagen\Urlaubsantragbescheid.template",
                "description": "",
                "metadata": ""
              }
            ]
          }
        }
      }
    }
  }
}

Answer 1

这听起来更像是一个数据分析问题，而不是 Angular 问题。考虑以下辅助方法，它采用您的数据结构和 returns 一个数组，该数组递归地填充具有 folder-name、关联文档类型和 sub-folders 数组（如果存在）的结构：

const listName = (node: any, aggregate = []): any[] => {
  let documentTypes = [];
  if (node) {
    if (node.documentTypes && node.documentTypes instanceof Array) {
      documentTypes = node.documentTypes.map(docType => docType["fullName"]);
    }
  }
  if (node.subFolders && node.subFolders instanceof Array) {
    return aggregate.concat({
      name: node.name,
      documentTypes,
      subFolders: node.subFolders.map(folder => listName(folder))
    });
  } else if (node.subFolders) {
    return aggregate.concat({
      name: node.name,
      documentTypes,
      subFolders: [listName(node.subFolders, aggregate)]
    });
  } else {
    return aggregate.concat({ name: node.name, documentTypes, subFolders: [] });
  }
};

const tree =
  data["soap:Envelope"]["soap:Body"]["ns2:getTemplateTreeResponse"]["return"][
    "subFolders"
  ];

const structure = listName(tree);

这个递归函数很可能有一个更短的版本，但它应该让您了解如何“解构”您的源代码 JSON。请注意，在我的示例中，您的 json-data 已加载到变量 data.

Answer 2

@evilstiefel 比我快，但我支持他。听起来更像是 data-transformation 问题而不是 Angular 问题。

查看 StackBlitz 小样本以查看我对问题的解决方案：https://stackblitz.com/edit/angular-basic-starter-fvewdw?file=src%2Fapp%2Fapp.component.ts

如何在 Angular 中删除此 JSON？

How do I strip this JSON in Angular?

treeview

json

rxjs

angular

ngx-treeview