Xml to json using javascript

Convert XML to JSON (and back) using Javascript

Specifically, had to do with converting JSON arrays with just 1 element to XML. When you converted it back to JSON, instead of a 1-element array, it created the object literal. I worked around it by checking the type with $.isArray(), and wrapping it in an array if !$.isArray().

14 Answers 14

Be sure to read the accompanying article on the xml.com O’Reilly site, which goes into details of the problems with these conversions, which I think you will find enlightening. The fact that O’Reilly is hosting the article should indicate that Stefan’s solution has merit.

thanks for the reply! In my case, the JSON is the canonical representation, and XML is just used for XSLT.. the use of which is not my idea! 🙂

In regards to @JasonDenizac comment to his post, I am not sure to understand how this link helps fixing the issue of having an object instead of an array of one item.

I found that if you start from json-xml-json, this library works well, but if you want xml-json-xml there is a problem with reversibility since it adds metadata xml elements like and

Please note that this is a copyleft licensed solution. It is only an option when you are writing open source software.

• new X2JS() — to create your instance to access all library functionality. Also you could specify optional configuration options here
• X2JS.xml2json — Convert XML specified as DOM Object to JSON
• X2JS.json2xml — Convert JSON to XML DOM Object
• X2JS.xml_str2json — Convert XML specified as string to JSON
• X2JS.json2xml_str — Convert JSON to XML string

var x2js = new X2JS(); function convertXml2JSon() < $("#jsonArea").val(JSON.stringify(x2js.xml_str2json($("#xmlArea").val()))); >function convertJSon2XML() < $("#xmlArea").val(x2js.json2xml_str($.parseJSON($("#jsonArea").val()))); >convertXml2JSon(); convertJSon2XML(); $("#convertToJsonBtn").click(convertXml2JSon); $("#convertToXmlBtn").click(convertJSon2XML); 

Hi, how did you overcome the issue where if you have one object in an object it is in object litteral, where if there is n > 1 objects, you have an array. This makes it hard to use xml to json objects in templates.

Yes, you should use some trick and it depends on your knowledge about XML structure (because no XSD here). Use . _asArray syntax to access your node always as array(sequence)

Sample:// XML string to JSON var xmlText = «Successddsfgdsdgfdgfd«; var jsonObj = X2JS.xml_str2json( xmlText ); alert (jsonObj.MyOperation.test); alert (jsonObj.MyOperation.test_asArray[0]);

My main problem, is when I transform my json to xml back, the json is full of extra properties, and when the string xml version keeps all the useless stuff. It has all kind of commas, and whitespaces.

These answers helped me a lot to make this function:

function xml2json(xml) < try < var obj = <>; if (xml.children.length > 0) < for (var i = 0; i < xml.children.length; i++) < var item = xml.children.item(i); var nodeName = item.nodeName; if (typeof (obj[nodeName]) == "undefined") < obj[nodeName] = xml2json(item); >else < if (typeof (obj[nodeName].push) == "undefined") < var old = obj[nodeName]; obj[nodeName] = []; obj[nodeName].push(old); >obj[nodeName].push(xml2json(item)); > > > else < obj = xml.textContent; >return obj; > catch (e) < console.log(e.message); >> 

As long as you pass in a jquery dom/xml object: for me it was:

Jquery(this).find('content').eq(0)[0] 

where content was the field I was storing my xml in.

Looks like you’re not grabbing any element attributes, which is where almost all the data I need is stored.

I’ve created a recursive function based on regex, in case you don’t want to install library and understand the logic behind what’s happening:

const xmlSample = 'tag contentanother contentinside content'; console.log(parseXmlToJson(xmlSample)); function parseXmlToJson(xml) < const json = <>; for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) < const key = res[1] || res[3]; const value = res[2] && parseXmlToJson(res[2]); jsonXml to json using javascript = ((value && Object.keys(value).length) ? value : res[2]) || null; >return json; >

Regex explanation for each loop:

• res[0] — return the xml (as is)
• res[1] — return the xml tag name
• res[2] — return the xml content
• res[3] — return the xml tag name in case the tag closes itself. In example:

You can check how the regex works here: https://regex101.com/r/ZJpCAL/1

Note: In case json has a key with an undefined value, it is being removed. That’s why I’ve inserted null at the end of line 9.

I was using xmlToJson just to get a single value of the xml.
I found doing the following is much easier (if the xml only occurs once..)

let xml = '' + ' 762384324' + ' Hank ' + ' Stone' + ''; let getXmlValue = function(str, key) < return str.substring( str.lastIndexOf('') + ('').length, str.lastIndexOf('') ); > alert(getXmlValue(xml, 'firstname')); // gives back Hank

You can also use txml. It can parse into a DOM made of simple objects and stringify. In the result, the content will be trimmed. So formating of the original with whitespaces will be lost. But this could be used very good to minify HTML.

const xml = require('txml'); const data = ` tag content another content inside content `; const dom = xml(data); // the dom can be JSON.stringified xml.stringify(dom); // this will return the dom into an xml-string 

Disclaimer: I am the author of txml, the fastest xml parser in javascript.

👍 This is a great drop-in replacement for fast-xml-parser , using simplify , that doesn’t convert strings to numbers arbitrarily (like «1.0» to 1 or 1. )

A while back I wrote this tool https://bitbucket.org/surenrao/xml2json for my TV Watchlist app, hope this helps too.

Synopsys: A library to not only convert xml to json, but is also easy to debug (without circular errors) and recreate json back to xml. Features :- Parse xml to json object. Print json object back to xml. Can be used to save xml in IndexedDB as X2J objects. Print json object.

@kleopatra this link points to the tool which converts xml to json. Its not a reference but the actual link to the resource. Not sure how else i should do it 🙂

xml2json = xml => < var el = xml.nodeType === 9 ? xml.documentElement : xml var h = h.content = Array.from(el.childNodes || []).filter(e => e.nodeType === 3).map(e => e.textContent).join('').trim() h.attributes = Array.from(el.attributes || []).filter(a => a).reduce((h, a) => < h[a.name] = a.value; return h >, <>) h.children = Array.from(el.childNodes || []).filter(e => e.nodeType === 1).map(c => h[c.nodeName] = xml2json(c)) return h > 

@ShortFuse the only dependency is xmldom, a xml parser. this doesn’t use xml2json from npm, although the name is the same

Fast XML Parser can help to convert XML to JSON and vice versa. Here is the example;

var options = < attributeNamePrefix : "@_", attrNodeName: "attr", //default is 'false' textNodeName : "#text", ignoreAttributes : true, ignoreNameSpace : false, allowBooleanAttributes : false, parseNodeValue : true, parseAttributeValue : false, trimValues: true, decodeHTMLchar: false, cdataTagName: "__cdata", //default is 'false' cdataPositionChar: "\\c", >; if(parser.validate(xmlData)=== true) 

If you want to parse JSON or JS object into XML then

//default options need not to set var defaultOptions = < attributeNamePrefix : "@_", attrNodeName: "@", //default is false textNodeName : "#text", ignoreAttributes : true, encodeHTMLchar: false, cdataTagName: "__cdata", //default is false cdataPositionChar: "\\c", format: false, indentBy: " ", supressEmptyNode: false >; var parser = new parser.j2xParser(defaultOptions); var xml = parser.parse(json_or_js_obj); 

Here’ a good tool from a documented and very famous npm library that does the xml js conversions very well: differently from some (maybe all) of the above proposed solutions, it converts xml comments also.

var obj = ; var builder = new xml2js.Builder(); var xml = builder.buildObject(obj); 

I would personally recommend this tool. It is an XML to JSON converter.

It is very lightweight and is in pure JavaScript. It needs no dependencies. You can simply add the functions to your code and use it as you wish.

It also takes the XML attributes into considerations.

var xml = ‘John Doe’; var json = xml2json(xml); console.log(json); // prints ‘>’ 

There is an open sourced library Xml-to-json with methods jsonToXml(json) and xmlToJson(xml).

This function directly reads the DOM properties of the XMLDocument (or document node/element) to build the JSON completely and accurately without trying to guess or match. Pass it responseXML , not responseText from XMLHttpRequest .

If you only have a string of XML and not an XMLDocument , jQuery will convert your text to one.

• Each node becomes an object. (All elements are nodes, not all nodes are elements (e.g. text within an element).)
• Every object contains the node name and type .
• If it has attributes, they appear as properties in an attributes object.
• If it has children, they appear recursively as node->objects in a children array.
• If it’s a Text, CDATA, or Comment node (bare text between element tags) or a comment, it shouldn’t have attributes or children but the text will be in a text property.

< // Always present "name": "FancyElement", "type": "Element", // If present "attributes: < "attr1": "val1", "attr2": "val2" >, "children": [. ], "text": "buncha fancy words" > 

function xml2json(xml) < try < const types = [null, "Element", "Attribute", "Text", "CDATA", "EntityReference", // Deprecated "Entity", // Deprecated "ProcessingInstruction", "Comment", "Document", "DocumentType", "DocumentFragment", "Notation" // Deprecated ]; var o = <>; o.name = xml.nodeName; o.type = types[xml.nodeType]; if (xml.nodeType == 3 || xml.nodeType == 4 || xml.nodeType == 8 ) < o.text = xml.textContent; >else < if (xml.attributes) < o.attributes = <>; for (const a of xml.attributes) < o.attributes[a.name] = a.value; >> if (xml.childNodes.length) < o.children = []; for (const x of xml.childNodes) < o.children.push(xml2json(x)) >> > return (o); > catch (e) < alert('Error in xml2json. See console for details.'); console.log('Error in xml2json processing node:'); console.log(o); console.log('Error:'); console.log(e); >> var doc = document.getElementById("doc"); var out = document.getElementById("out"); out.innerText = JSON.stringify(xml2json(doc), null, 2); /* Let's process the whole Code Snippet #document, why not? * Yes, the JSON we just put in the document body and all * this code is encoded in the JSON in the console. * In that copy you can see why the XML DOM will all be one line. * The JSON in the console has "\n" nodes all throughout. */ console.log(xml2json(document));

This text is valid for HTML.But it probably shouldn't be siblings to an element in XML.
 

Источник

How to Convert XML to JSON in JavaScript

We can use the xml-js library from NPM to easily convert XML to JSON in JavaScript, i.e.:

import < xml2json >from 'xml-js'; // . const json = xml2json(xml);

import < xml2json >from 'xml-js'; const xml = `Garage red 120 2  blue 100 3  green 130 2 `; const json = xmltojson(xml, ); console.log(json); 

This code will have the following output:

What are XML and JSON?

Let’s go through these terms in case you’re not familiar with them

XML (eXtensible Markup Language) is a markup language similar to HTML that was designed to store and transport data. Unlike HTML, XML doesn’t have any predefined tags. Instead, we define our own tags according to our requirements.

JSON (JavaScript Object Notation) is a text format used to store and transport data based on JavaScript object syntax and is commonly used to build RESTful APIs.

Install xml-js

Before using xml-js , we need to install it in our project. We can do this with the NPM CLI.

After installation, we’ll be able to import it into a JavaScript module, like this:

We use import destructuring to access the xml2json() method directly from the library.

For a CommonJS module, we’ll import it like this instead:

The xml2json() function

The xml2json() function has two parameters. The first is the XML string to convert to JSON, and the second is an optional object.

Customize conversion of XML to JSON

We use this object to specify various options for customizing the conversion process.

In our example, we don’t pass an object, so the default options are used. We can pass an object with a spaces option to properly format and indent the resulting JSON.

import < xml2json >from 'xml-js'; const xml = `   English French Spanish `; // 👇 Set "spaces" option const json = xml2json(xml, < spaces: 2 >); console.log(json); 

The compact property to determine whether the resulting JSON should be detailed or compact. It is false by default.

import < xml2json >from 'xml-js'; const xml = `   English French Spanish `; // 👇 Set "compact" option const json = xml2json(xml, < spaces: 2, compact: true >); console.log(json); 

Now the resulting JSON will have a significantly smaller size than before:

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Источник