1

I have been trying to display all child nodes of the parent node based on the attribute type using JS

Requirement:

user gives three I/P as :

1)"Ram" "Student" "a1"

O/P :should display all the child elements based on name & type selected

aaa,aaaaaaaa,aaaa

2)"Ram" "Student" "a2" :

xxxx,tttttt,yyyy

XML:

<?xml version="1.0" ?>
<root>
    <program name="Ram">
        <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>
        <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>
        </computation>      
    </program>
    <program name="Rahul">
    .......
    .......
    .......
    </program>
    <program name="Ramesh">
    .......
    .......
    .......
    </program>
</root>

I have JS to display the Child nodes ,But its not based on the attribute value

    <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");//Here "module" should be replaced by attribute value which user gives as i/p

            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>
    <p id="test">Test me!</p>
</body>

</html>
Ram
  • 55
  • 1
  • 7
  • https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName – VirtualTroll Mar 03 '16 at 13:19
  • 1
    You don't specify what XML parser you are using, but if it supports it, XPath would be the simplest way to do this. – Jack A. Mar 03 '16 at 13:19
  • Possible duplicate of [XML parsing of a variable string in JavaScript](http://stackoverflow.com/questions/649614/xml-parsing-of-a-variable-string-in-javascript) – shas Mar 03 '16 at 13:19
  • I have made changes to my HTML File please check – Ram Mar 03 '16 at 13:25

2 Answers2

0

All you have to do is to check for the desired attribute.

Your code gives back an array of modules:

var x = xmlDoc.getElementsByTagName("module");

The last thing for you to do is to go through the nodes and select only those with the desired attribute with:

// x is the array of modules, i stands for the array iteration    
x[i].getAttribute(name);

Now you can combine your desired input with the search algorithm. Since you got Childnodes with Children it could get a little slow. You will always go through:

Parent -> Child.getAttribute -> new array -> Child.getAttribute.

The last thing for you to do is to check for the input with a normal if statement, it depends on how complicated your input is.

If anything is unclear, feel free to ask.

Regards, Megajin

Megajin
  • 2,648
  • 2
  • 25
  • 44
  • I tried but din not get ,Can you please edit & show me for one i/p .Rest I will do – Ram Mar 03 '16 at 14:44
  • does i/p mean input? If yes you can just go for "document.getElementById('yourInputField').value" after you got the value you can store it in a variable and go on with your function. – Megajin Mar 03 '16 at 16:46
  • Hi,i/p means Input..I don't have any ID here – Ram Mar 04 '16 at 03:07
0

You can use XPath to locate part of XML document using complex filter. Example below shows XPath expression that will return all children elements of module, where type and name attributes of itself as well as the ancestors, match certain value :

var result = "";

var name = "Ram";
var type1 = "student";
var type2 = "a2";
var query = "/root/program[@name='" + name + "']/computation[@type='" + type1 + "']/module[@type='" + type2 + "']/*";

var nodes = xmlDoc.selectNodes(query);
for (i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    result += node.nodeName + ": " + node.childNodes[0].nodeValue + "<br>";
}

document.getElementById("demo").innerHTML = result;

Tested on IE11 and it shows the expected output after clicking on "Allow blocked content" prompt :

enter image description here

Output :

enter image description here

har07
  • 88,338
  • 12
  • 84
  • 137
  • I am getting Blank ,Should i include any library ?? – Ram Mar 03 '16 at 14:50
  • Worked without any library here in my windows 10's IE. Look at your IE console for errors, and learn to debug your javascript – har07 Mar 03 '16 at 15:05
  • its showing ActiveXObject is not defined xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); – Ram Mar 04 '16 at 03:05
  • Make sure you tested this in IE, and if you already did that, what is you IE version? – har07 Mar 04 '16 at 03:14
  • I have tested this on IE 10 , – Ram Mar 04 '16 at 04:47
  • @Ram then I have no idea know why. The code indeed throwing exception when run on non-IE browser (tested in Firefox with exception *"ReferenceError: ActiveXObject is not defined"*), but worked fine when tested in IE11 after I clicked `Enabled` on the ActiveX warning – har07 Mar 05 '16 at 06:27