How to read xml file using javascript

Pals,

We will see how to read an external xml file using javascript and get attributes value. We will mainly work with 3 files here..

1. index.html // to read content and maintains logic

2. read.xml // xml file

3. script.js // to parse xml file

First lets come with 2.read.xml file

read.xml:

<?xml version="1.0" encoding="UTF-8"?>
<BJ_BetBehindHistory>
   <seat num="0" user_id="D918E5FE81D3411F">
      <game no="1" result="L" />
      <game no="2" result="L" />
      <game no="3" result="W" />
      <game no="4" result="W" />
      <game no="5" result="L" />
      <game no="6" result="P" />
      <game no="7" result="W" />
      <game no="8" result="L" />
      <game no="9" result="W" />
      <game no="10" result="W" />
   </seat>
   <seat num="2" user_id="zoeqrhmlcan45ok4">
      <game no="1" result="L" />
      <game no="2" result="L" />
      <game no="3" result="L" />
      <game no="4" result="W" />
      <game no="5" result="W" />
   </seat>
   <seat num="3" user_id="4idqyxcbw5xd3liv">
      <game no="1" result="L" />
      <game no="2" result="L" />
      <game no="3" result="L" />
      <game no="4" result="W" />
      <game no="5" result="L" />
      <game no="6" result="L" />
      <game no="7" result="W" />
   </seat>
   <seat num="4" user_id="88044D599D4E4ECF">
      <game no="1" result="L" />
      <game no="2" result="W" />
      <game no="3" result="L" />
      <game no="5" result="P" />
      <game no="7" result="P" />
      <game no="8" result="W" />
      <game no="9" result="W" />
      <game no="10" result="W" />
   </seat>
   <seat num="6" user_id="F95E7C7C3A0940AE">
      <game no="1" result="L" />
      <game no="2" result="L" />
      <game no="3" result="L" />
      <game no="4" result="W" />
      <game no="5" result="P" />
      <game no="6" result="W" />
      <game no="7" result="L" />
      <game no="8" result="W" />
      <game no="9" result="W" />
      <game no="10" result="W" />
   </seat>
   <seat num="-1" user_id="Dealer">
      <game no="1" Score="21" />
      <game no="2" Score="19" />
      <game no="3" Score="20" />
      <game no="4" Score="26" />
      <game no="5" Score="18" />
      <game no="6" Score="17" />
      <game no="7" Score="18" />
      <game no="8" Score="17" />
      <game no="9" Score="22" />
      <game no="10" Score="17" />
   </seat>
</BJ_BetBehindHistory>

Now script.js file
script.js:

Snippet

function loadXMLDoc(dname) 
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}

Now index.html file
index.html:

 

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="script.js"> </script>
    </head>
    <body>
        <script>
            xmlDoc = loadXMLDoc("read.xml");
 
            x = xmlDoc.getElementsByTagName('seat');

for (i = 0; i < x.length; i++) {
                W = 0; L = 1; P = 2;
                attnode = x.item(i).getAttributeNode("num");
                document.write("Seat " + attnode.name);
                document.write(" = ");
                document.write(attnode.value);
}
Snippet
</script>
    </body>
</html>

To go in depth of this, you should refer the source here..

Some more important points to note:

Snippet
var gameXml = xmlDoc.getElementsByTagName(‘game’)[0]; // game1 is stored in gamexml
var getVal = gameXml.getAttribute(‘no’); //game1 no value is stored in getVal
console.log(getVal); // print in console log

Snippet
var dealerval = xmlDoc.getElementsByTagName(‘seat’)[0]; // seat1 is stored in dealerval
var dealer = dealerval.getElementsByTagName(‘game’)[getVal]; // from above getval get game details fully like

<game no=”1″ result=”L” /> in dealer variable. Now dealer.getAttribute(‘result’) will get the value like “L” or “W” or “P”.

 

For more: http://www.w3schools.com/xml/xml_to_html.asp

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s