JavaScript将XML转成JSON的方法

2023年5月27日上午9:26 • JavaScript

将XML转换为JSON是前端开发中的一个常见任务，可以使用JavaScript实现。以下是一种将XML转换为JSON的方法，步骤如下：

获取XML数据

首先，需要从服务器或API中获取XML数据。可以使用JavaScript中的XMLHttpRequest对象来实现。其中，XMLHttpRequest.open()方法设置HTTP请求的方法和URL，XMLHttpRequest.send()方法向服务器发送HTTP请求。以下是一个获取XML数据的示例：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let xmlData = xhr.responseXML;
    // 转换XML为JSON
  }
};
xhr.open('GET', 'http://example.com/data.xml', true);
xhr.send();

将XML转换为JSON

有多种方法将XML数据转换为JSON格式，这里介绍基于递归的方法。该方法使用了节点的nodeName和nodeType属性，检查节点类型并处理其中的内容。以下是一个将XML转换为JSON的示例：

function xmlToJson(xml) {
  let obj = {};
  if (xml.nodeType === 1) {
    if (xml.attributes.length > 0) {
      obj["@attributes"] = {};
      for (let i = 0; i < xml.attributes.length; i++) {
        let attribute = xml.attributes.item(i);
        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
      }
    }
  } else if (xml.nodeType === 3) {
    obj = xml.nodeValue;
  }
  if (xml.hasChildNodes()) {
    for (let i = 0; i < xml.childNodes.length; i++) {
      let item = xml.childNodes.item(i);
      let nodeName = item.nodeName;
      if (typeof (obj[nodeName]) === "undefined") {
        obj[nodeName] = xmlToJson(item);
      } else {
        if (typeof (obj[nodeName].push) === "undefined") {
          let old = obj[nodeName];
          obj[nodeName] = [];
          obj[nodeName].push(old);
        }
        obj[nodeName].push(xmlToJson(item));
      }
    }
  }
  return obj;
}

以上的递归函数会将给定的XML文档转换为一个JavaScript对象，其中节点名称作为对象的属性，文本内容作为对象的值。对于包含子节点的节点，该函数将其转换为数组对象，其中每个元素都是一个JavaScript对象。通过返回obj对象，可以获取转换后的JSON数据。

处理JSON数据

最后，可以使用该JSON数据进行其他前端任务，如DOM操作、表格渲染、数据处理等。

以下是一个完整的演示代码，通过该代码可将示例XML数据转换为JSON，并在页面上展示转换后的JSON数据：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>XML to JSON</title>
</head>
<body>
  <pre id="json"></pre>
  <script>
    let xmlData = '<bookstore><book category="web"><title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book><book category="web"><title lang="en">XQuery Kick Start</title><author>James McGovern</author><author>Per Bothner</author><author>Kurt Cagle</author><author>James Linn</author><author>Vaidyanathan Nagarajan</author><year>2003</year><price>49.99</price></book><book category="web"><title lang="en">Programming Microsoft SQL Server 2000 with Microsoft Visual Basic .NET</title><author>Mark Johnston</author><author>Mike Gunderloy</author><year>2001</year><price>49.99</price></book><book category="web"><title lang="en">Web Services Essentials</title><author>Ethan Cerami</author><year>2002</year><price>39.95</price></book><book category="web"><title lang="en">Web Development with JavaServer Pages</title><author>Duane K. Fields</author><author>Mark A. Kolb</author><author>Shawn Bayern</author><year>2002</year><price>36.95</price></book></bookstore>';

    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(xmlData,"text/xml");
    let jsonData = xmlToJson(xmlDoc);
    let jsonText = JSON.stringify(jsonData, null, 2);

    document.getElementById("json").textContent = jsonText;
  </script>
</body>
</html>

在以上代码中，通过定义一个XML字符串，该字符串标识一个简单的图书店，然后将其解析为XML文档。接着，使用先前定义的xmlToJson函数，将该文档转换为JSON数据。最后，使用JSON.stringify()方法将JSON数据格式化为一个易读的形式，并将其显示在页面上。

通过以上方法，我们可以方便地将XML数据转换为JSON数据，并可在前端任务中使用转换后的数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript将XML转成JSON的方法 - Python技术站