Harjutus 8 XML faili kuvamine lehe

document.getElementById("app").innerHTML = "<table id='xmlTable'></table>";
let xmlhttp = new XMLHttpRequest(); // Create an XMLHttpRequest object

xmlhttp.open("GET", "src/games.xml", false);
xmlhttp.send();

if (xmlhttp.status === 200 && xmlhttp.responseXML) {
  // Check that the request was successful and responseXML is not null
  let XMLContent = xmlhttp.responseXML;

  let tableRows = "<thead><tr><th>Title</th><th>Price</th></tr></thead>";
  let gameElements = XMLContent.getElementsByTagName("game");

  for (let i = 0; i < gameElements.length; i++) {
    tableRows +=
      "<tbody><tr><td>" +
      gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
      "</td></tr></tbody>";
  }
  document.getElementById("xmlTable").innerHTML = tableRows;
} else {
  console.error("XMLHttpRequest failed with status " + xmlhttp.status);
}

<?xml version="1.0" encoding="UTF-8"?>
<gameslist>
 
<game>
<title lang="en">TFT</title>
<price>Free</price>
</game>
 
<game>
<title lang="en">Borderlands</title>
<price>25</price>
</game>
 
<game>
<title lang="en">Teso</title>
<price>1000</price>
</game>
 
</gameslist>

function loadXMLDoc() {
  let xmlhttp = new XMLHttpRequest(); //uus päring
  xmlhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      //статус запроса выполнен
      getGameDetails(this);
    }
  };
  xmlhttp.open("GET", "src/games.xml", true); //ava xml fail
  xmlhttp.send();
}

function getGameDetails(xml) {
  //saame andmed xml failis
  const xmlDoc = xml.responseXML;
  let tableRows = "<tr><th>Title</th><th>Price</th><th>Platforms</th></tr>"; //on liisatud andmet tüübid
  let gameElements = xmlDoc.getElementsByTagName("game"); //
  for (let i = 0; i < gameElements.length; i++) {
    tableRows += //tsüükli loomine
      "<tr><td>" +
      gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
      "</td><td>";
    let platforms = gameElements[i].getElementsByTagName("platform");
    for (let j = 0; j < platforms.length; j++) {
      //tsüükli loomine
      tableRows += platforms[j].childNodes[0].nodeValue + "/";
    }
    tableRows += "</td></tr>";
  }
  document.getElementById("xmlTable").innerHTML = tableRows;
}

document.getElementById("app").innerHTML = `<table id="xmlTable"></table>`;

loadXMLDoc();

<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
    <game>
        <title lang="en">Hearthstone</title>
        <price>Free</price>
        <platforms>
        <platform>PC</platform>
        <platform>ios</platform>
        </platforms>
    </game>
    <game>
        <title lang="en">Minecraft</title>
        <price>10.99</price>
        <platforms>
        <platform>xbox</platform>
        <platform>pc</platform>
        </platforms>
    </game>
    <game>
        <title lang="en">Dota 2</title>
        <price>life</price>
        <platforms>
        <platform>PC</platform>
        <platform>android</platform>
        </platforms>
    </game>
</gamelist>