Reading & displaying data from XML file by using JavaScript parser and displaying nodes and values

We have seen how XMLHttpRequest works in getting data from xml file. Now we will see how it is used to display data at different nodes and child nodes.

We will use getElementsByTagName to collect information about the tag ( or element) of xml file. Here is the code to display 6th node name tag value. Note that the first node number starts with 0.

<script type="text/javascript">
if (window.XMLHttpRequest)
  {  my_xml=new XMLHttpRequest();
  }
else
  {
  my_xml=new ActiveXObject("Microsoft.XMLHTTP");
  }
/////////////////////////////
my_xml.open("GET",'https://www.plus2net.com/php_tutorial/file-xml-demo.xml',false);
my_xml.send();
xml_str=my_xml.responseXML; 

var x=xml_str.getElementsByTagName("name"); 
document.write(x[5].childNodes[0].nodeValue);
</script>

The output is here

Alex John

To display all the values of tag name we have to loop through them.

<script type="text/javascript">
if (window.XMLHttpRequest)
  {  my_xml=new XMLHttpRequest();
  }
else
  {
  my_xml=new ActiveXObject("Microsoft.XMLHTTP");
  }
/////////////////////////////
my_xml.open("GET",'https://www.plus2net.com/php_tutorial/file-xml-demo.xml',false);
// change above line url to yours ///

my_xml.send();
xml_str=my_xml.responseXML; 

var x=xml_str.getElementsByTagName("name"); // 1

//document.write(x[5].childNodes[0].nodeValue);

for(i=0;i<x.length;i++){
document.write(x[i].childNodes[0].nodeValue); 

document.write('<br>');
}
</script>

By using the above data we can create one dropdown list box which can be used as a part of a web form

Reading Attributes

XML

Subscribe to our YouTube Channel here

XMLHttpRequest to read data from XML file