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

user_17435626 0
Viewed 38

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>
xml html
1 Answers

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
user_94480900
Related