CODEWITHSUNDEEP
javascriptjson
Abhinav Parashar
Abhinav Parashar

Reputation: 649

XML string to JSON javascript

I have a xml string which i want to convert in JSON string

var txt = "<?xml version='1.0' encoding='UTF-8' ?>
                 <result>
                   <info>
                      <id>1</id>
                      <type>HL</type>
                      <ven>DEMOMA</ven>
                   </info>
                   <info>
                      <id>2</id>
                      <type>HL</type>
                      <ven>DEMOMB</ven>
                   </info>
               <result>";

i tried to initially convert it in DOM object using parser but it throws parsing error.

parser = new DOMParser();
xmlDoc = parser.parseFromString(txt,"text/xml");

i want my output json string like only by using Javascript

{"result":[{"id":"1","type":"HL","ven":"DEMOMA"},{"id":"2","type":"HL","ven":"DEMOMB"}]}

Upvotes: 15

Views: 58704

Answers (2)

Michael
Michael

Reputation: 11914

I will try to explain with an example with use x2js.js https://github.com/abdmob/x2js and jquery (and without jQuery) library.

GET XML data from the API and convert this data to JSON

With jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript" src="xml2json.js"></script>
</head>
<body>
    <script type="text/javascript">
    var x2js = new X2JS();
    $.ajax({
        url: 'http://ip-api.com/xml',
        dataType: 'XML',
        success: function(data) {
            var xmlText = data; // XML
            var jsonObj = x2js.xml2json(xmlText); // Convert XML to JSON
            console.log(jsonObj);
        }
    });
    </script>
</body>
</html>

without jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="xml2json.js"></script>
</head>
<body>
    <script type="text/javascript">
    function loadXMLDoc(dname) {
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET", dname, false);
        xhttp.send();
        return xhttp.responseXML;
    }

    var xmlDoc = loadXMLDoc("http://ip-api.com/xml"); // XML
    var x2js = new X2JS();
    var jsonObj = x2js.xml2json(xmlDoc); // Convert XML to JSON
    console.log(jsonObj);
    </script>
</body>
</html>

and using the example that you gave in question. Fix closed <result> to </result>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="xml2json.js"></script>
</head>
<body>
    <script type="text/javascript">
        var txt = "<?xml version='1.0' encoding='UTF-8' ?> <result> <info> <id>1</id> <type>HL</type> <ven>DEMOMA</ven> </info> <info> <id>2</id> <type>HL</type> <ven>DEMOMB</ven> </info> </result>";
        var x2js = new X2JS();
        var jsonObj = x2js.xml_str2json(txt);
        console.log(jsonObj);
    </script>
</body>
</html>

Upvotes: 5

pramjeet
pramjeet

Reputation: 106

Check out this https://github.com/metatribal/xmlToJSON

Its a very small and useful script. Usage is very easy.

Include the src

<script type="text/javascript" src="path/xmlToJSON.js"></script>

and enjoy! xmlToJSON is packaged as a simple module, so use it like this

testString = '<xml><a>It Works!</a></xml>';   // get some xml (string or document/node)
result = xmlToJSON.parseString(testString);   // parse

'result' is your JSON object.

Upvotes: 3

Related Questions