CODEWITHSUNDEEP
javascriptxml
Ram
Ram

Reputation: 55

Parsing of XML Nodes in JS

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

MY XML File:

<?xml version="1.0" ?>
<root>
<program name="John">
    <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="David">
.......
.......
.......
</program>
<program name="Smith">
.......
.......
.......
</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 for a1 contents:

modPath:aaa

modInputTemplate:aaaaaaaa

modSchematic:aaaa

I want for all the childs (a1 to a8)

Requirement:

1)If I pass a parent attribute value like "name=John",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?

Upvotes: 2

Views: 84

Answers (1)

jcubic
jcubic

Reputation: 66620

Using jQuery:

function loadxml() {
    $.get('writers.xml', readXML);
}
function readXML(xml) {
   var txt = '';
   $(xml).find('computation[type=student] module').each(function() {
      txt += $(this).find('modPath').text() + '<br/>';
   });
   $('#demo').html(txt);
}

Upvotes: 2

Related Questions