当前位置：首页 > news >正文

vue3+typescript 如何将xml格式的文件转化成key value的形式？

news 2025/4/27 1:10:27

背景

要将接口返回的 XML 数据解析为 JSON 格式，并提取其中的 name 和 ip 信息，然后将其转化为 key: value 结构并渲染到页面上

思路

1、解析 XML 数据：使用 JavaScript 的 DOMParser 解析 XML 数据。
2、提取数据：遍历解析后的 XML 数据，提取 name 和 ip 信息。
3、转换为 key: value 结构：将提取的数据转换为所需的结构。
4、渲染到页面：使用 Vue 3 和组件库渲染数据。

解决方案

1. 解析 XML 数据
首先，使用 DOMParser 解析 XML 数据：
function parseXML(xmlString: string): Document {const parser = new DOMParser();return parser.parseFromString(xmlString, "application/xml");
}2. 提取数据
遍历解析后的 XML 数据，提取 name 和 ip 信息：
function extractData(xmlDoc: Document): { [key: string]: string } {const domains = xmlDoc.getElementsByTagName("domain"); //获取对应你想要解析的标签const result: { [key: string]: string } = {};for (let i = 0; i < domains.length; i++) {const domain = domains[i];const name = domain.getAttribute("name");//我这里需要的是name和ipconst ipElements = domain.getElementsByTagName("ip");if (name && ipElements.length > 0) {const ip = ipElements[0].textContent;if (ip) {result[name] = ip;}}}return result;
}
3. 转换为 key: value 结构
将提取的数据转换为所需的结构：
const xmlData = `...`; // 你的 XML 数据字符串（通过api读取）
const xmlDoc = parseXML(xmlData);
const data = extractData(xmlDoc);4. 渲染到页面
使用 Vue 3 和 组件库 渲染数据等。
allData.value = Object.values(data).flat().map((item) => ({ ...item }));