Parsing XML File in JS

Question

I am trying to parse an XML file in JS,The Below XML contains parent & child elements as given below

MY XML File:

<?xml version="1.0" ?>
<root>
<program name="Vishal">
    <computation type="student">
        <module type="a1">              
            <modPath>aaa</modPath>
            <modInputTemplate>aaaaaaaa</modInputTemplate>
            <modSchematic>aaaa</modSchematic>
        </module>
        <module type="a2">              
            <modPath>xxxx</modPath>
            <modInputTemplate>tttttt</modInputTemplate>
            <modSchematic>yyyy</modSchematic>
        </module>
        <module type="a3">
            <modPath>bbbbbbbbbb</modPath>
            <modInputTemplate>bbbbbbbbbb</modInputTemplate>
            <modSchematic>bbbbbbbb</modSchematic>
        </module>
        <module type="a4">
            <modPath>cccc</modPath>
            <modInputTemplate>cccccc</modInputTemplate>
            <modSchematic>ccccccc</modSchematic>
        </module>
        <module type="a5">
            <modPath>ddddddd</modPath>
            <modInputTemplate>ddddddddddddd</modInputTemplate>
            <modSchematic>dddddddddd</modSchematic>
        </module>
        <module type="a6">
            <modPath>eeee</modPath>
            <modInputTemplate>eee</modInputTemplate>
            <modSchematic>eee</modSchematic>
        </module>
        <module type="a7">
            <modPath>ffff</modPath>
            <modInputTemplate>ffff</modInputTemplate>
            <modSchematic>fffff</modSchematic>
        </module>
        <module type="a8">
            <modPath>ggggggg</modPath>
            <modInputTemplate>ggggggg</modInputTemplate>
            <modSchematic>ggggggg</modSchematic>
        </module>
    </computation>
    <computation type="Employee">
        <module type="b1">              
            <modPath>lllll</modPath>
            <modInputTemplate>llllll</modInputTemplate>
            <modSchematic>lllll</modSchematic>
        </module>
        <module type="b2">              
            <modPath>mmmmmmmmm</modPath>
            <modInputTemplate>mmmmmmmm</modInputTemplate>
            <modSchematic>mmmmmm</modSchematic>
        </module>
        <module type="b3">
            <modPath>nnnn</modPath>
            <modInputTemplate>nnnnnn</modInputTemplate>
            <modSchematic>nnnn</modSchematic>
        </module>
        <module type="b4">
            <modPath>oooooo</modPath>
            <modInputTemplate>ooooooo</modInputTemplate>
            <modSchematic>oooooooooooo</modSchematic>
        </module>
        <module type="b5">
            <modPath>pppppppppp</modPath>
            <modInputTemplate>ppppppppppp</modInputTemplate>
            <modSchematic>ppppppppppp</modSchematic>
        </module>
        <module type="b6">
            <modPath>qqqqqqqqq</modPath>
            <modInputTemplate>qqqqqqqqqq</modInputTemplate>
            <modSchematic>qqqqqqqqqqq</modSchematic>
        </module>           
    </computation>      
</program>
<program name="Rakesh">
.......
.......
.......
</program>
<program name="Praveen">
.......
.......
.......
</program>
</root>

JavaScript File

<html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script type="text/javascript">
    var xmlDoc;
    function loadxml()
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.onreadystatechange = readXML;
        xmlDoc.load("writers.xml");
    }

    function readXML()
    {
        if(xmlDoc.readyState == 4){
            myFunction(xmlDoc);
        }
        function myFunction(xml) {
            var x, i, txt;
            txt = "";
            var x = xmlDoc.getElementsByTagName("module");

            for( i = 0; i < x[0].childNodes.length; i++) {
                txt += x[0].childNodes[i].nodeName + ": " + x[0].childNodes[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("demo").innerHTML = txt;
        }
    }
</script>
</head>

<body onload="loadxml()">
    <p id="demo">Write output of loadxml()</p>
</body>
</html>

Out put what I am getting is only a1 contetnt:

aaa

aaaaaaaa

aaaa

I want for all the childs (a1 to a8)

Requirement:

1)If I pass a parent attribute value like 'name=Vishal",Then I should get all its child nodes as follows

<computation type="student">
    <module type="a1">              
        <modPath>aaa</modPath>
        <modInputTemplate>aaaaaaaa</modInputTemplate>
        <modSchematic>aaaa</modSchematic>
    </module>
    <module type="a2">              
        <modPath>xxxx</modPath>
        <modInputTemplate>tttttt</modInputTemplate>
        <modSchematic>yyyy</modSchematic>
    </module>
    .
    .
    .
</computation>

2)Similarly if I pass the attribute as type="student",Then I should get all its child nodes, as given below

    <module type="a1">              
        <modPath>aaa</modPath>
        <modInputTemplate>aaaaaaaa</modInputTemplate>
        <modSchematic>aaaa</modSchematic>
    </module>
    <module type="a2">              
        <modPath>xxxx</modPath>
        <modInputTemplate>tttttt</modInputTemplate>
        <modSchematic>yyyy</modSchematic>
    </module>
    .
    .
    .
    <module type="a8">
        <modPath>ggggggg</modPath>
        <modInputTemplate>ggggggg</modInputTemplate>
        <modSchematic>ggggggg</modSchematic>
    </module>

whats the logic to print above nodes by passing the attribute values?

xcopy · Accepted Answer · 2016-03-04 03:32:53Z

1

You can do this by using the DOMParser. Here is an example.

var parser = new DOMParser();
var xml = '<your xml>';
var xmlDoc = parser.parseFromString(xml, 'text/xml');
// Now, you can simply query the xml document as you would the DOM...
var modules = xmlDoc.getElementsByTagName('module');
var vishalModules = xmlDoc.querySelector('[name="Vishal"] module');

Here is a fiddle that fills both of your requirements:

https://jsfiddle.net/bcezsuc8/

UPDATE

Here is another fiddle that gets all of the children under type student. Note that it does not use ActiveX. You can just use the DOMParser which is native javascript.

https://jsfiddle.net/bcezsuc8/3/

edited Mar 4, 2016 at 3:32

answered Mar 3, 2016 at 4:29

xcopy

2,26419 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ram Over a year ago

I will try that ,Do you have any link for that

xcopy Over a year ago

Here is a link to the API: developer.mozilla.org/en-US/docs/Web/API/DOMParser Give me a minute and I will add a fiddle.

Ram Over a year ago

HI,I have added the JS file,Please check & also wriiten the o/p

xcopy Over a year ago

@Ram if my answer has helped you please mark it as the answer to your question.

Ram Over a year ago

I went for different approach it worked..Thanks for the help

huli · Accepted Answer · 2016-03-03 04:12:49Z

0

You can try this library: https://github.com/cheeriojs/cheerio

var cheerio = require('cheerio'),
$ = cheerio.load(xml);
$('computation[type=student]'); // your second exmaple

You can learn other method in it's documents.

answered Mar 3, 2016 at 4:12

huli

1011 silver badge6 bronze badges

3 Comments

Sean_A91 Over a year ago

Everything for xml is built directly into browsers, I would say use what is there. Just my opinion on using a library for something like this.

Ram Over a year ago

I can not use Jquery,I am using JavaScript

dandavis Over a year ago

that won't work if the XML tags have any overlap with HTML tags with special behaviors, like RSS's <title> for example.

Collectives™ on Stack Overflow

Parsing XML File in JS

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related