title: How can I fetch XML Data from a file stored on my PC and populate a table in HTML using javascript?
body: <p>Please see my XML and HTML below:
  All I want to do is generate a HTML table by using the data in my XML file.
  (This XML file is in my C directory but in the same folder as the HTML file.)
  (C:/Users/Admin/Documents/GameStats/main.html --> Being the main html file).
  (C:/Users/Admin/Documents/GameStats/game.xml --> Being the XML file).</p>
  
  <p>I will appreciate any help. I don't mind JAVASCRIPT, AJAX, JQUERY. 
  I would really appreciate if you can tell me my mistake.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;GAME&gt;
          &lt;COUNTRY&gt;
              &lt;NAME&gt;China&lt;/NAME&gt;
              &lt;PLAYERS&gt;80,000&lt;/PLAYERS&gt;
              &lt;KILLS&gt;35,060&lt;/KILLS&gt;
          &lt;/COUNTRY&gt;
          &lt;COUNTRY&gt;
              &lt;NAME&gt;Pakistan&lt;/NAME&gt;
              &lt;PLAYERS&gt;234&lt;/PLAYERS&gt;
              &lt;KILLS&gt;340&lt;/KILLS&gt;
          &lt;/COUNTRY&gt;
          &lt;COUNTRY&gt;
              &lt;NAME&gt;Indonesia&lt;/NAME&gt;
              &lt;PLAYERS&gt;867&lt;/PLAYERS&gt;
              &lt;KILLS&gt;546&lt;/KILLS&gt;
          &lt;/COUNTRY&gt;
      &lt;/GAME&gt;
  </code></pre>
  
  <p>And this is the HTML Document:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
  table,th,td {
    border : 1px solid black;
    border-collapse: collapse;
  }
  th,td {
    padding: 5px;
  }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;button type="button" onclick="loadXMLDoc()"&gt;Get Game Stats&lt;/button&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;table id="demo"&gt;&lt;/table&gt;
  
  &lt;script&gt;
  function loadXMLDoc() {
  //document.body.style.backgroundColor = "red";
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        myFunction(this);
      }
    };
    xmlhttp.open("GET", "/game.xml", true);
    xmlhttp.send();
  }
  function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Players&lt;/th&gt;&lt;th&gt;Kills&gt;&lt;/th&gt;&lt;/tr&gt;";
    var x = xmlDoc.getElementsByTagName("COUNTRY");
  
    for (i = 0; i &lt;x.length; i++) { 
      table += "&lt;tr&gt;&lt;td&gt;" +
      x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
      "&lt;/td&gt;&lt;td&gt;" +
      x[i].getElementsByTagName("PLAYERS")[0].childNodes[0].nodeValue +
      "&lt;/td&gt;&lt;td&gt;"  +
      x[i].getElementsByTagName("KILLS")[0].childNodes[0].nodeValue +
      "&lt;/td&gt;&lt;/tr&gt;";
    }
  
    document.getElementById("demo").innerHTML = table;
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I will appreciate the help. :)</p>