JS操作xml对象转换为Json对象示例

下面是JS操作XML对象转换为JSON对象示例的完整攻略。

什么是XML对象和JSON对象？

XML(Extensible Markup Language) 是一种文本格式的标记语言，用于存储和传输数据。XML 文件可作为 Web 文档来读取和呈现。

JSON(JavaScript Object Notation) 是一种轻量级的数据格式，它是一种文本格式的数据交换形式。

在现代网站及Web应用中，数据的传输格式一般采用JSON格式，也有时采用XML格式。

XML对象与JSON对象互相转换

由于在前端开发过程中，有时需要将一个由服务端返回的XML对象，转换为客户端能够直接操作和使用的JSON对象。这时需要以下述方法进行转换：

1. 创建XML对象

在 JavaScript 中，XMLHttpRequest 可以用于从 Web 服务器上请求 XML 数据并将其返回到客户端。

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.xml", false);  // 同步请求
xhr.send(null);
var xml = xhr.responseXML;

2. 将XML对象转换为JSON对象

我们可以使用DOM解析库，将XML对象转换为JSON对象。

function xml2json(xml) {
  var json = {};
  if (xml.nodeType === 1) {  // 元素节点
    if (xml.attributes.length > 0) {
      json["@attributes"] = {};
      for (var i = 0; i < xml.attributes.length; i++) {
        var attr = xml.attributes.item(i);
        json["@attributes"][attr.nodeName] = attr.nodeValue.trim();
      }
    }
  } else if (xml.nodeType === 3) {  // 文本节点
    json = xml.nodeValue.trim();
  }
  if (xml.hasChildNodes()) {
    for(var i = 0; i < xml.childNodes.length; i++) {
      var child = xml.childNodes.item(i);
      var nodeName = child.nodeName;
      if (typeof(json[nodeName]) === "undefined") {
        json[nodeName] = xml2json(child);
      } else {
        if (typeof(json[nodeName].push) === "undefined") {
          var old = json[nodeName];
          json[nodeName] = [];
          json[nodeName].push(old);
        }
        json[nodeName].push(xml2json(child));
      }
    }
  }
  return json;
}

var json = xml2json(xml);

上述代码，通过递归地遍历XML节点，将XML节点转化成对应的JSON对象，以直接在前端使用。

3. 将JSON对象转换为XML对象

如果需要将JSON对象转换为XML对象，我们可以使用dom-parser库。

function json2xml(json, rootName) {
  var xmlDoc = document.implementation.createDocument("", "", null);
  var rootEl = xmlDoc.createElement(rootName);
  xmlDoc.appendChild(rootEl);

  function appendNodes(parentEl, json) {
    Object.keys(json).forEach(function(key) {
      var value = json[key];
      var childEl;
      if (Array.isArray(value)) {
        value.forEach(function(childJson) {
          childEl = xmlDoc.createElement(key);
          parentEl.appendChild(childEl);
          appendNodes(childEl, childJson);
        });
      } else if (isObject(value)) {
        childEl = xmlDoc.createElement(key);
        parentEl.appendChild(childEl);
        appendNodes(childEl, value);
      } else {
        childEl = xmlDoc.createElement(key);
        childEl.textContent = value;
        parentEl.appendChild(childEl);
      }
    });
  }

  function isObject(o) {
    return o && typeof o === 'object' && o.constructor === Object;
  }

  appendNodes(rootEl, json);
  return xmlDoc;
}

var xml = json2xml(json, "root");

上述代码，通过递归地遍历JSON对象，将JSON转化成对应的XML对象。

示例

下面是两个示例，让你更好地理解XML对象和JSON对象互转的过程和方法。

示例1

假设服务器返回的XML对象如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="fiction">
    <title lang="en">Harry Potter</title>
    <author>J.K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="children">
    <title lang="en">The Lion King</title>
    <author>Disney</author>
    <year>1994</year>
    <price>19.95</price>
  </book>
</bookstore>

我们需要将它转换成JSON对象，代码如下：

function xml2json(xml) {
  var json = {};
  if (xml.nodeType === 1) {  // 元素节点
    if (xml.attributes.length > 0) {
      json["@attributes"] = {};
      for (var i = 0; i < xml.attributes.length; i++) {
        var attr = xml.attributes.item(i);
        json["@attributes"][attr.nodeName] = attr.nodeValue.trim();
      }
    }
  } else if (xml.nodeType === 3) {  // 文本节点
    json = xml.nodeValue.trim();
  }
  if (xml.hasChildNodes()) {
    for(var i = 0; i < xml.childNodes.length; i++) {
      var child = xml.childNodes.item(i);
      var nodeName = child.nodeName;
      if (typeof(json[nodeName]) === "undefined") {
        json[nodeName] = xml2json(child);
      } else {
        if (typeof(json[nodeName].push) === "undefined") {
          var old = json[nodeName];
          json[nodeName] = [];
          json[nodeName].push(old);
        }
        json[nodeName].push(xml2json(child));
      }
    }
  }
  return json;
}

var xmlString = '<?xml version="1.0" encoding="UTF-8"?><bookstore><book category="fiction"><title lang="en">Harry Potter</title><author>J.K. Rowling</author><year>2005</year><price>29.99</price></book><book category="children"><title lang="en">The Lion King</title><author>Disney</author><year>1994</year><price>19.95</price></book></bookstore>';
var parser = new DOMParser();
var xml = parser.parseFromString(xmlString, "text/xml");
var json = xml2json(xml);

console.log(json);

输出的结果如下：

{
  "@attributes": {},
  "bookstore": {
    "book": [{
      "@attributes": {
        "category": "fiction"
      },
      "title": {
        "@attributes": {
          "lang": "en"
        },
        "#text": "Harry Potter"
      },
      "author": "J.K. Rowling",
      "year": "2005",
      "price": "29.99"
    }, {
      "@attributes": {
        "category": "children"
      },
      "title": {
        "@attributes": {
          "lang": "en"
        },
        "#text": "The Lion King"
      },
      "author": "Disney",
      "year": "1994",
      "price": "19.95"
    }]
  }
}

示例2

假设我们有一个JSON对象如下所示：

{
  "@attributes": {},
  "bookstore": {
    "book": [{
      "@attributes": {
        "category": "fiction"
      },
      "title": {
        "@attributes": {
          "lang": "en"
        },
        "#text": "Harry Potter"
      },
      "author": "J.K. Rowling",
      "year": "2005",
      "price": "29.99"
    }, {
      "@attributes": {
        "category": "children"
      },
      "title": {
        "@attributes": {
          "lang": "en"
        },
        "#text": "The Lion King"
      },
      "author": "Disney",
      "year": "1994",
      "price": "19.95"
    }]
  }
}

我们需要将它转换成XML对象，并设置根节点为bookstore，代码如下：

function json2xml(json, rootName) {
  var xmlDoc = document.implementation.createDocument("", "", null);
  var rootEl = xmlDoc.createElement(rootName);
  xmlDoc.appendChild(rootEl);

  function appendNodes(parentEl, json) {
    Object.keys(json).forEach(function(key) {
      var value = json[key];
      var childEl;
      if (Array.isArray(value)) {
        value.forEach(function(childJson) {
          childEl = xmlDoc.createElement(key);
          parentEl.appendChild(childEl);
          appendNodes(childEl, childJson);
        });
      } else if (isObject(value)) {
        childEl = xmlDoc.createElement(key);
        parentEl.appendChild(childEl);
        appendNodes(childEl, value);
      } else {
        childEl = xmlDoc.createElement(key);
        childEl.textContent = value;
        parentEl.appendChild(childEl);
      }
    });
  }

  function isObject(o) {
    return o && typeof o === 'object' && o.constructor === Object;
  }

  appendNodes(rootEl, json);
  return xmlDoc;
}

var xml = json2xml(json, "bookstore");

console.log(xml);