简体   繁体   中英

Parsing XML File in JS

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?

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/

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM