How to convert XML and JSON between JS

This time I will bring you the method of converting XML and JSON with JS. What are the precautions for converting XML and JSON with JS? The following is a practical case, let's take a look.

During development, sometimes XML and JSON are converted to each other, and they are required to be used in JS. I searched a lot on the Internet, but every useful one either lacks arms or legs, or the words do not express the meaning, which is too useless. God's sake, I decided to realize it myself.

Comparison of the differences between JSON and XML

1. Definition introduction

(1).XML definition

Extensible Markup Language (XML) is a markup language used to mark electronic documents to make them structural. It can be used to mark data and define

data types. It is A source language that allows users to define their own markup language. XML uses DTD (document type definition) document type definition to organize data; the format is unified, cross-platform and language, and has long become a recognized standard in the industry. XML is a subset of Standard Generalized Markup Language (SGML) and is well suited for Web transmission. XML provides a unified method for describing and exchanging structured data independent of applications or vendors.

(2).JSON definition

JSON (

JavaScript Object Notation) is a lightweight data exchange format with good reliability Reading and fast writing features. Data exchange between different platforms is possible. JSON adopts a highly compatible and completely language-independent text format, and also has behavior similar to C language habits (including C, C, C#, Java, JavaScript, Perl, Python, etc.). These properties make JSON an ideal data exchange language. JSON is based on JavaScript Programming Language, a subset of Standard ECMA-262 3rd Edition - December 1999.

2. Advantages and Disadvantages of XML and JSON

(1). Advantages and Disadvantages of XML

f35d6e602fd7d0f0edfa6f7d103c1b57. Advantages of XML

A. The format is unified and conforms to standards;
B. It is easy to interact with other systems remotely and data sharing is more convenient.

2cc198a1d5eb0d3eb508d858c9f5cbdb.Disadvantages of XML

A. XML files are huge, the file format is complex, and transmission takes up bandwidth;
B. Both the server and the client need to spend a lot of code to parse XML, As a result, the server-side and client-side codes become extremely complex and difficult to maintain;
C. The way of parsing XML between different client browsers is inconsistent, and a lot of code needs to be written repeatedly;
D. Server-side and client-side parsing XML consumes more resources and time.

(2). Advantages and disadvantages of JSON

f35d6e602fd7d0f0edfa6f7d103c1b57. Advantages of JSON:

A. The data format is relatively simple, easy to read and write, the format They are all compressed and occupy little bandwidth;

　B. Easy to parse, client-side JavaScript can simply read JSON data through eval();

　C.Support multiple languages, Including ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby and other server-side languages ​​to facilitate server-side parsing;

　D. In the PHP world, there are already PHP-JSON and JSON- PHP has appeared, and it is preferred to directly call programs serialized by PHP. PHP server-side objects, arrays, etc. can directly generate JSON format, which is convenient for client access and extraction;

　E. Because JSON format can be directly used by the server The use of code greatly simplifies the amount of code development on the server side and the client side, and the tasks remain unchanged and is easy to maintain.

2cc198a1d5eb0d3eb508d858c9f5cbdb. Disadvantages of JSON

A. It is not as popular and widely used as XML format, and it is not as versatile as XML;

B.JSON The promotion of the format in Web Services is still in its infancy.

Convert XML and JSON to each other in Javascript

Let’s look at the calling example first:

<viewport id="menuPane" layout="border">
    <panel region="center" border="0" layout="border">
        <tbar>
            <toolbar text="XXXX">
                <menu>
                    <text text="11">
                    </text>
                    <text text="22">
                    </text>
                    <text text="33">
                    </text>
                </menu>
            </toolbar>
            <toolbar text="XXXX">
                <menu>
                    <text text="44">
                    </text>
                    <text text="55">
                    </text>
                    <menu>
                        <text text="6 6">
                        </text>
                    </menu>
                    <text text="77">
                    </text>
                </menu>
            </toolbar>
        </tbar>
    </panel>
</viewport>
var xmlParser = new XmlToJson();
var json = xmlParser.parse(xml);
console.log( JSON.stringify(json) );
var jsonParser = new JsonToXml();
var xml = jsonParser.parse(json);
console.log( xml );

Convert XML to JSON:

function XmlToJson() {
}
XmlToJson.prototype.setXml = function(xml) {
    if(xml && typeof xml == "string") {
        this.xml = document.createElement("p");
        this.xml.innerHTML = xml;
        this.xml = this.xml.
getElementsByTagName
("*")[0];
    }
    else if(typeof xml == "object"){
        this.xml = xml;
    }
};
XmlToJson.prototype.getXml = function() {
    return this.xml;
};
XmlToJson.prototype.parse = function(xml) {
    this.setXml(xml);
    return this.convert(this.xml);
};
XmlToJson.prototype.convert = function(xml) {
    if (xml.nodeType != 1) {
        return null;
    }
    var obj = {};
    obj.xtype = xml.nodeName.toLowerCase();
    var nodeValue = (xml.textContent || "").replace(/(\r|\n)/g, "").replace(/^\s+|\s+$/g, "");
    
    if(nodeValue && xml.childNodes.length == 1) {
        obj.text = nodeValue;
    }
    if (xml.attributes.length > 0) {
        for (var j = 0; j < xml.attributes.length; j++) {
            var attribute = xml.attributes.item(j);
            obj[attribute.nodeName] = attribute.nodeValue;
        }
    }
    if (xml.childNodes.length > 0) {
        var items = [];
        for(var i = 0; i < xml.childNodes.length; i++) {
            var node = xml.childNodes.item(i);
            var item = this.convert(node);
            if(item) {
                items.push(item);
            }
        }
        if(items.length > 0) {
            obj.items = items;
        }
    }
    return obj;
};

Convert JSON to XML:

function JsonToXml() {
 this.result = [];
}
JsonToXml.prototype.spacialChars = ["&","<",">","\"","&#39;"];
JsonToXml.prototype.validChars = ["&","<",">",""","&#39;"];
JsonToXml.prototype.toString = function(){
 return this.result.join("");
};
JsonToXml.prototype.replaceSpecialChar = function(s){
    for(var i=0;i<this.spacialChars.length;i++){
        s=s.replace(new RegExp(this.spacialChars[i],"g"),this.validChars[i]);
    }
    return s;
};
JsonToXml.prototype.appendText = function(s){
    s = this.replaceSpecialChar(s);
    this.result.push(s);
};
JsonToXml.prototype.appendAttr = function(key, value){
    this.result.push(" "+ key +"=\""+ value +"\"");
};
JsonToXml.prototype.appendFlagBeginS = function(s){
 this.result.push("<"+s);
};
JsonToXml.prototype.appendFlagBeginE = function(){
 this.result.push(">");
};
JsonToXml.prototype.appendFlagEnd = function(s){
 this.result.push("</"+s+">");
};
JsonToXml.prototype.parse = function(json){
 this.convert(json);
 return this.toString();
};
JsonToXml.prototype.convert = function(obj) {
 var nodeName = obj.xtype || "item";
 this.appendFlagBeginS(nodeName);
 var arrayMap = {};
 for(var key in obj) {
  var item = obj[key];
  if(key == "xtype") {
   continue;
  }
  if(item.constructor == String) {
   this.appendAttr(key, item);
  }
  if(item.constructor == Array) {
   arrayMap[key] = item;
  }
 }
 this.appendFlagBeginE();
 for(var key in arrayMap) {
  var items = arrayMap[key];
  for(var i=0;i<items.length;i++) {
   this.convert(items[i]);
  }
 }
 this.appendFlagEnd(nodeName);
};

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What are the methods for parsing Json

What are the methods for JS to judge json

Detailed explanation of JSONP principles and case analysis

The above is the detailed content of How to convert XML and JSON between JS. For more information, please follow other related articles on the PHP Chinese website!