XML数据到Angular 8中的材质树
我目前正在尝试将XML数据显示到材料树（https://material.angular.io/components/tree/overview）中，问题是材料树不会直接采用XML dataSource，我需要将我的XML转换成这样的东西：
[
{
name: 'Fruit',
children: [
{name: 'Apple'},
{name: 'Banana'},
{name: 'Fruit loops'},
]
}, {
name: 'Vegetables',
children: [
{
name: 'Green',
children: [
{name: 'Broccoli'},
{name: 'Brussel sprouts'},
]
}
]
},
];
我来自其他API的XML数据如下所示：
<processTimer>
<Environment uri="record:processTimer.BPM/environment">
<Environment>
<initiator>
<commonName>anonymous</commonName>
</initiator>
<locale>fr_FR</locale>
<counter>8802</counter>
<last-fault>
<scope>Domaine_1</scope>
<message>java.lang.NullPointerException</message>
</last-fault>
</Environment>
</Environment>
<blah uri="record:processTimer.HL7_COMP/CX"/>
</processTimer>
我试图将其解析为JSON，因为它看起来更像JSON，而不是XML，但我无法获得所需的DataModel。
我还尝试将其解析为DOM对象，因为我们可以在控制台上显示它的树，但是同样在这里我无法让它在页面本身上工作。
我有点坚持，如果有人可以给我一些从这里去哪里的提示，那就太好了！
提前致谢 ！:)
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
要将XML数据转换为所需的JSON结构，你可以使用JavaScript的DOM解析器或者第三方库如xml2js。这里我提供一个使用DOM解析器的基本示例来帮助你开始：
首先，确保你的XML数据是字符串格式，然后创建一个DOMParser对象来解析它。
let xmlData = `
<root>
<item name="Fruit">
<child name="Apple"/>
<child name="Banana"/>
<child name="Fruit loops"/>
</item>
<item name="Vegetables">
<child name="Green">
<subchild name="Broccoli"/>
<subchild name="Brussel sprouts"/>
</child>
</item>
</root>
`;
// 使用DOMParser解析XML
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xmlData, "text/xml");
接下来，定义一个递归函数来遍历XML节点并构建所需的数据结构：
function convertXmlToJson(node) {
let jsonNode = { name: node.nodeName };
if (node.childNodes.length > 0) {
jsonNode.children = [];
for (let child of node.childNodes) {
if (child.nodeType === Node.ELEMENT_NODE) {
jsonNode.children.push(convertXmlToJson(child));
}
}
}
return jsonNode;
}
// 从XML文档的根节点开始转换
let jsonData = [convertXmlToJson(xmlDoc.documentElement)];
console.log(jsonData);
这个示例假设你的XML数据遵循了一个特定的模式，其中每个<item>对应一个顶级类别，每个<child>（或子级标签）代表该类别的直接子项。如果实际XML结构不同，你可能需要调整convertXmlToJson函数以适应实际情况。
请注意，上述代码片段仅适用于简单的XML结构，并且没有处理属性等复杂情况。对于更复杂的XML，你可能需要考虑使用更强大的库，如xml2js，它提供了更多的配置选项和灵活性。
