我无法让我的网页从同一文件夹内的 xml 文件中提取数据答案

【问题标题】：I cant get my webpage to pull data from an xml file inside the same folder我无法让我的网页从同一文件夹内的 xml 文件中提取数据
【发布时间】：2021-12-28 04:49:43
【问题描述】：

我不精通 javascript 和 xml，但我正在尝试创建一个网页，我可以在其中通过 ID 代码过滤产品来搜索 xml 文件上的产品。我已经尝试了很多东西，但我没有收到错误，当我点击搜索时没有任何反应。任何关于我哪里出错的帮助将不胜感激，因为老实说我几乎不知道我在做什么。

<!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>

【问题讨论】：

标签： html xml

【解决方案1】：

由于您正在处理包含名称空间的 xml 文档，因此使用带有名称空间解析器的 xml 解析器来解析它会更安全。以下内容应该让您足够接近您正在寻找的内容：

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

【讨论】：