After writing a code that extracts elements from an XML product catalog and displays them in a table, I now aim to retrieve only one specific product with all its details based on a given SERIAL. For instance, I want to fetch the product from the catalog by matching it with a particular SERIAL.
Shown below is my XML document:
<CATALOG>
<PRODUCT>
<SERIAL>123ABC</SERIAL>
<PRODNR>1234</PRODNR>
<PRODNM>COOLER</PRODNM>
<ACCNAME>JOHN</ACCNAME>
<NRDOC>0001</NRDOC>
</PRODUCT>
<PRODUCT>
<SERIAL>234BCD</SERIAL>
<PRODNR>2345</PRODNR>
<PRODNM>MOUSEPAD</PRODNM>
<ACCNAME>STEVE</ACCNAME>
<NRDOC>0002</NRDOC>
</PRODUCT>
<PRODUCT>
<SERIAL>345CDE</SERIAL>
<PRODNR>3456</PRODNR>
<PRODNM>KEYBOARD</PRODNM>
<ACCNAME>WILLIAM</ACCNAME>
<NRDOC>0003</NRDOC>
</PRODUCT>
<PRODUCT>
<SERIAL>456DEF</SERIAL>
<PRODNR>4567</PRODNR>
<PRODNM>MOUSE</PRODNM>
<ACCNAME>MARCUS</ACCNAME>
<NRDOC>0004</NRDOC>
</PRODUCT>
</CATALOG>
This snippet shows the progress of my current code:
getProductBySerialNumber(url) {
var serialNumber = document.getElementById('searchBox').value;
var xmlhttp;
var txt, xx, x, i;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
txt = "<table border='1'><tr><th>Product number</th><th>Product name</th><th>Account name</th><th>Document number</th></tr>";
x = xmlhttp.responseXML.documentElement.getElementsByTagName("PRODUCT");
for (i = 0; i < x.length; i++) {
txt = txt + "<tr>";
// Code logic to populate table rows goes here
txt = txt + "</tr>";
}
txt = txt + "</table>";
document.getElementById('showTable').innerHTML = txt;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}