Harjutus 8 XML faili kuvamine js lehel

XML — Extensible Markup Language

index.js

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();

games.xml

<?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>

1.Valmista endale uus Vanilla keskkond Code Sandbox’is.

2.Kasuta järgmist malli index.js sees: index.js

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

3.Loo src kausta XML fail näiteks on toodud mängude kohta, aga mõtle endale muu teema. Vaheta küsimärgid enda mängu valiku vastu: games.xml

<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
    <game>
        <title lang="en">Hearthstone</title>
        <price>Free</price>
    </game>
    <game>
        <title lang="en">Minecraft</title>
        <price>19.99</price>
    </game>
    <game>
        <title lang="en">Witcher 3</title>
        <price>29.99</price>
    </game>
</gamelist>

4.Lisa XML faili saamiseks funktsioon. Vaheta küsimärgid games.xml allikaga: index.js

let tableRows = "<tr><th>Title</th><th>Price</th></tr>";


let gameElements = XMLContent.getElementsByTagName("game"); 


for (let i = 0; i < gameElements.length; i++) {

  let title =
    gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
  let price =
    gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;

  tableRows += "<tr><td>" + title + "</td><td>" + price + "</td></tr>";
}


document.getElementById("xmlTable").innerHTML = tableRows;