H8 XML faili kuvamine lehe JS-ga

TEOORIA

XML – Extensible Markup Language

PRAAKTIKA

Loome faili 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>10.99</price>
    </game>
    <game>
        <title lang="en">Dota 2</title>
        <price>life</price>
    </game>
</gamelist>

loome faili index.html

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>

    <script src="index.mjs" type="module"></script>
  </body>
</html>

loome faili html.mjs

// Create an instance of XMLHttpRequest
let xmlhttp = new XMLHttpRequest();

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

// Open the XML file
xmlhttp.open("GET", "src/games.xml", false);

// Send the request
xmlhttp.send();
if (xmlhttp.status === 200) {
  // Get the XML content
  let XMLContent = xmlhttp.responseXML;

  // Initialize the table rows
  let tableRows = "<tr><th>Title</th><th>Price</th></tr>";
  // Get all the game elements

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

  // Iterate through all the games and add them to the table
  for (let i = 0; i < gameElements.length; i++) {
    tableRows +=
      "<tr><td>" +
      gameElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
    +"</td><td>" +
      gameElements[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;
    +"</td></tr>";
    // Corrected length typo
  }

  // Set the table content
  document.getElementById("xmlTable").innerHTML = tableRows; // Fixed id
} else {
  console.error("console.error");
}

loome faili styles.css

body {
  font-family: sans-serif;
}

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;

NAIDIS