下面是JS操作XML对象转换为JSON对象示例的完整攻略。
XML(Extensible Markup Language) 是一种文本格式的标记语言，用于存储和传输数据。XML 文件可作为 Web 文档来读取和呈现。
JSON(JavaScript Object Notation) 是一种轻量级的数据格式，它是一种文本格式的数据交换形式。
在现代网站及Web应用中，数据的传输格式一般采用JSON格式，也有时采用XML格式。
由于在前端开发过程中，有时需要将一个由服务端返回的XML对象，转换为客户端能够直接操作和使用的JSON对象。这时需要以下述方法进行转换：
在 JavaScript 中，XMLHttpRequest 可以用于从 Web 服务器上请求 XML 数据并将其返回到客户端。
var xhr = new XMLHttpRequest();
xhr.open("GET", "example.xml", false); // 同步请求
xhr.send(null);
var xml = xhr.responseXML;
我们可以使用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对象，以直接在前端使用。
如果需要将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对象互转的过程和方法。
假设服务器返回的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"
}]
}
}
假设我们有一个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);
输出的结果如下：
<?xml version="1.0" encoding=""/><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>
以上就是JS操作XML对象转换为JSON对象的完整攻略。
本文链接：http://task.lmcjl.com/news/10734.html