how to access XML subnodes using javascript

Question

I want to use javascript to get information from a xml file loaded into a webpage.

The below given is the xmlfile(a.xml) i am using.

a.xml

<?xml version="1.0"?>

<Step rID="T6">
  <Obj ><![CDATA[Get Data Table - Passed]]></Obj>
  <Details ><![CDATA[]]></Details>
  <Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
  <TimeTick>1530810986</TimeTick>
  <NodeArgs eType="User" icon="5" nRep="9" >
    <Disp><![CDATA[Get Data Table - Passed]]></Disp>
  </NodeArgs>
</Step>
<Step rID="T7">
  <Obj ><![CDATA[GetDataTable - Successful]]></Obj>
  <Details ><![CDATA[Toral Row get:65534]]></Details>
  <Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
  <TimeTick>1530810986</TimeTick>
  <NodeArgs eType="User" icon="5" nRep="10" status="Passed" >
    <Disp><![CDATA[GetDataTable - Successful]]></Disp>
  </NodeArgs>
</Step>

I want to access nodes under a specific node in xml using java script? That is i want to access Time node after i access step node. And the below given is the index.html page to which i want to load the xml data

index.html

<html>
  <head>
    <title>Report</title>
    <style></style>
  </head>
  <body>
    <p>Results of  <b>Test cases</b> </p>
    <div id="books"></div>
  </body>

  <script>
  var oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  var testcase_Number = 0;
  var endOfTest= 0;
  function reportStatus() {
    if (oXHR.readyState == 4)               // REQUEST COMPLETED.
      showTheList(this.responseXML);      // ALL SET. NOW SHOW XML DATA.
  }

  oXHR.onreadystatechange = reportStatus;
  oXHR.open("GET", "a.xml", true);      // true = ASYNCHRONOUS REQUEST 
                                   //(DESIRABLE), false = SYNCHRONOUS REQUEST.
  oXHR.send();

  function showTheList(xml) {
    var divBooks = document.getElementById('books');        // THE PARENT DIV.
    var Book_List = xml.getElementsByTagName('Step');       // THE XML TAG NAME.
    var divLeft = document.createElement('div');
    divLeft.className = 'col1';

    for (var i = 0; i < Book_List.length; i++) {
      divLeft.innerHTML=Book_List[i].getChildElementsByTagName("Time")[0].nodeValue;
      divBooks.appendChild(divLeft);
    }
  };
  </script>
</html>

In the above code I am trying to access the Time subnode under the step node. and I have used arrays in the above example as the xml page i am using have lots of Step subnodes , and i want to access the Time subnodes under Step for each one of them.

thanks, Any help is appreciated

This is my first post in stack over flow.. sorry for any missing informations — Nimal krishna
– Nimal krishna, Commented Jul 5, 2018 at 21:01
@AlfonsoNishikawa, i have updated my post, please have a look at it. — Nimal krishna
– Nimal krishna, Commented Jul 6, 2018 at 16:04
Thank you, @NIMALKRISHNA . An improvement: use indentation in your sourcecode. — Alfonso Nishikawa
– Alfonso Nishikawa, Commented Jul 7, 2018 at 11:59
i have posted a new question , please have a look at it ,thanks — Nimal krishna
– Nimal krishna, Commented Jul 9, 2018 at 17:32

collapsar · Accepted Answer · 2018-07-10 08:28:32Z

2

You have the option of iterating over the xml nodes directly, employing one of the XPath processing APIs. It basically suffices to rewrite your showTheList function. What follows is a complete standalone solution, however:

<html>
    <head>
    <title>Report</title>
    <style>

    </style>
    <script>
        function showTheList() {
            let x_xmlisland = document.getElementById("template_xml");
            let s_xmlsource = x_xmlisland.textContent; 

            // Parse xml. This may beunnecessary depending on the ajax lib used. 
            let parser = new DOMParser();
            let xmlDoc = parser.parseFromString(s_xmlsource, "application/xml");

            // Obtain the xml node set containing the needed info.
            // In this case, these are the textual contents of all 'Time' elements that are children of a 'Step' node.
            let xpr_time  = xmlDoc.evaluate("//Step/Time/text()", xmlDoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
            let node_time
              ;

            let divBooks = document.getElementById('books');        // THE PARENT DIV.
// debugger; // uncomment for tracing 
            while ( ( node_time = xpr_time.iterateNext() ) !== null ) { // iterate over xml nodes
                let divLeft = document.createElement('div');
                divLeft.className = 'col1';
                divLeft.innerHTML = node_time.textContent;  // The xpath expression references the 'text()' function which provides a text node. String must still be extracted. 
                divBooks.appendChild(divLeft);
            }
        }
        </script>
    </head>
    <body onLoad="showTheList()">
        <script type="text/xml" id="template_xml"><?xml version="1.0"?>
<Steps>
    <Step rID="T6">
        <Obj ><![CDATA[Get Data Table - Passed]]></Obj>
        <Details ><![CDATA[]]></Details>
        <Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
        <TimeTick>1530810986</TimeTick>
        <NodeArgs eType="User" icon="5" nRep="9" >
            <Disp><![CDATA[Get Data Table - Passed]]></Disp>
        </NodeArgs>
    </Step>
    <Step rID="T7">
        <Obj ><![CDATA[GetDataTable - Successful]]></Obj>
        <Details ><![CDATA[Toral Row get:65534]]></Details>
        <Time><![CDATA[7/5/2018 - 13:16:27]]></Time>
        <TimeTick>1530810986</TimeTick>
        <NodeArgs eType="User" icon="5" nRep="10" status="Passed" >
            <Disp><![CDATA[GetDataTable - Successful]]></Disp>
        </NodeArgs>
    </Step>
</Steps>
        </script>
        <p>Results of  <b>Test cases</b> </p>
        <div id="books"></div>
    </body>
</html>

Code has been tested.

Note

The sample xml provided in the question is not well-formed since it lacksa unique root element. The solution would still work but only consider the first Stepelement.

Update

To allow for xml from an external source, the ajax code needs to be reintroduced:

function getData() {
    let oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    oXHR.onreadystatechange = function() {
        if (oXHR.readyState == 4 && oXHR.status == 200) {
            showTheList(oXHR);
        }
    };
    oXHR.open("GET", "state_data.xml", true); // ...or whatever else
    oXHR.send();
} // getData

Lacking local data, it makes no longer sense to register showTheList as an onLoad handler.

<body onLoad="getData()">

edited Jul 10, 2018 at 8:28

answered Jul 6, 2018 at 16:16

collapsar

17.4k5 gold badges40 silver badges66 bronze badges

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

4 Comments

Nimal krishna Over a year ago

Hi collapsar, thanks for the help. I tried the above function but it is not displaying the time value. checking what went wrong now.. :(

collapsar Over a year ago

@NIMALKRISHNA Your xml sample lacks a unique root element, which basically blots out allbut the first Step elements. I introduced an artificial Steps element in the revised solution. The solution works as-is. Note that I have also changed the time stamp in the second Time element to disambiguate the output.

Nimal krishna Over a year ago

Hi @collapsar , is there a way to add this xml file as a seperate file instead of puting it in html ?because i need to display the informations from an xml file which keeps on changing.

collapsar Over a year ago

@Nimalkrishna I've complemented the answer

Collectives™ on Stack Overflow

how to access XML subnodes using javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related