I cant get my webpage to pull data from an xml file inside the same folder-CodePudding

I'm not well versed in javascript nor xml but i'm trying to create a webpage where i can search through products on an xml file by filtering them by an ID Code. I've tried many things but i don't get errors, just nothing happens when i click search. Any help on where i'm going wrong would be appreciated as honestly I have barely any idea what i'm doing.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vendor</title>
</head>

<body>
    <input type="number" id="Code">
    <button type="button" name="button" onclick="loadData()">Get Product</button>
    <div id="results">

    </div>


    <script type="text/javascript">
        async function loadData(){
            var data = await fetch("product.xml")
            var parsedData = await data.text()
            
            var parser = new DOMParser();
            var ProductDoc = parser.parseFromString(parsedData,"text/xml");
            var results = ""
            var CodeInput = parseInt(document.getElementById("Code").value)
            var product = ProductDoc.getElementsByTagName("product")
            
            for(var i = 0; i < product.length; i  ){
                var Category = Category[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue
                var Code = Code[i].getElementsByTagName("Code")[0].childNodes[0].nodeValue
                var Name = Name[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue
                var Description = Description[i].getElementsByTagName("Description")[0].childNodes[0].nodeValue
                var Quantity = Quantity[i].getElementsByTagName("Quantity")[0].childNodes[0].nodeValue
                var UnitPrice = UnitPrice[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue

                if(isNaN(CodeInput) || CodeInput == parseInt(Code)) {
                    results  = "<div>"
                      "Category: "   Category
                      ", Code: "   Code
                      ", Name: "   Name
                      ", Description: "   Description
                      ", Quantity: "   Quantity
                      ", UnitPrice: "   UnitPrice
                      "</div><br/>"

                }
            }
            document.getElementById("results").innerHTML = results
        }
    </script>
</body>

</html>

<?xml version="1.0" encoding="UTF-8"?>
<main xmlns:product="index.html">
    <product>
        <product:Category>example</product:Category>
        <product:Code>111-11</product:Code>
        <product:Name>example</product:Name>
        <product:Description>example</product:Description>
        <product:Quantity>example</product:Quantity>
        <product:UnitPrice>example</product:UnitPrice>
    </product>
    <product>
        <product:Category>example</product:Category>
        <product:Code>122-22</product:Code>
        <product:Name>example</product:Name>
        <product:Description>example</product:Description>
        <product:Quantity>example</product:Quantity>
        <product:UnitPrice>example</product:UnitPrice>
    </product>
</main>

<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" targetNamespace="index.html" xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <xs:element name="Category" type="xs:string" />
    <xs:element name="Code" type="xs:string" />
    <xs:element name="Name" type="xs:string" />
    <xs:element name="Description" type="xs:string" />
    <xs:element name="Quantity" type="xs:string" />
    <xs:element name="UnitPrice" type="xs:string" />
</xs:schema>

CodePudding user response：

Since you are dealing with an xml document which contains namespaces, it safer to parse it using an xml parser with a namespace resolver. The following should get you close enough to what you are looking for:

let parser = new DOMParser(),
  ProductDoc = parser.parseFromString(parsedData, "application/xml"),
  evaluator = new XPathEvaluator(),
  resolver = evaluator.createNSResolver(ProductDoc),
  results = "",
  products = ProductDoc.evaluate('//product', ProductDoc, resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (let i = 0; i < products.snapshotLength; i  ) {
  let tags = ProductDoc.evaluate('.//product:*', products.snapshotItem(i), resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  new_div = "<div>"
  for (let i = 0; i < tags.snapshotLength; i  ) {
    new_div  = `${tags.snapshotItem(i).localName}: ${tags.snapshotItem(i).textContent}  <br/>`        
  }      
  results  = `${new_div}</div><br/>`
}
document.getElementById("results").innerHTML = results