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

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

XMLHttpRequest to read data from XML file

Subhendu Mohapatra