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

背景

要将接口返回的 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和ip
    const 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 }));