JSFiddle - React, Tailwind, and code Playground

by Olayinka Otuniyi

HTML

<button type="button" onclick="loadDoc()">Load</button>
<br><br>
<table id="myTable"></table>

CSS

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

JavaScript

function loadDoc() {
  var xhttp = new XMLHttpRequest();

  xhttp.open("GET", "/Users/username/Documents/catalog.xml", true);
  xhttp.send();


  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      xmlFunction(this.response);
    }
  };

}

function xmlFunction(xml) {
  var i;
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xml, "text/xml");
  var table = "<tr><th>Category</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("ITEM");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td>" +
      x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue +
      "</td><td>" +
      x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
      "</td></tr>";
  }
  document.getElementById("myTable").innerHTML = table;
}