javascript - 使用 AJAX 解析 XML 数据

标签 javascript html ajax xml xml-parsing

我想以表格格式显示 XML 数据,下面是我编写的代码,但它不起作用。来自 XML 的数据被分支出来,因此没有完全出现在前面 - 但在我当前的代码中没有返回任何内容。

<!DOCTYPE html>
<html>
  <style>
  table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
  }
  th,td {
  padding: 5px;
  }
  th{
  background-color:#BBB;
  }
  </style>
  <body>

    <p>Sample para  component</p>

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

  <script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          myFunction(xhttp);
        }
      };
      xhttp.open("GET", "sample.xml", true);
      xhttp.send();
    }

    function myFunction(xml) {
      var a, b, c, d, e, f;

      function smartValue1(root, tag) {

        return (root.getElementsByTagName("InstructingOrgName").length &&
          root.getElementsByTagName("InstructingOrgName")[0].childNodes.length &&
          root.getElementsByTagName("InstructingOrgName")[0].childNodes[0].nodeValue
        ) || '';
      }

      function smartValue2(root, tag) {

        return (root.getElementsByTagName("InstructingOrgCode").length &&
          root.getElementsByTagName("InstructingOrgCode")[0].childNodes.length &&
          root.getElementsByTagName("InstructingOrgCode")[0].childNodes[0].nodeValue
        ) || '';
      }

      function smartValue3(root, tag) {
        for (c = 0; c <= document.getElementsByTagName("PortfolioName").length; c++) {
          return (root.getElementsByTagName("PortfolioName").length &&
            root.getElementsByTagName("PortfolioName")[c].childNodes.length &&
            root.getElementsByTagName("PortfolioName")[c].childNodes[c].nodeValue
          ) || '';
        }
      }

      function smartValue4(root, tag) {
        for (d = 0; d <= document.getElementsByTagName("PortfolioCode").length; d++) {
          return (root.getElementsByTagName("PortfolioCode").length &&
            root.getElementsByTagName("PortfolioCode")[d].childNodes.length &&
            root.getElementsByTagName("PortfolioCode")[d].childNodes[d].nodeValue
          ) || '';
        }
      }

      function smartValue5(root, tag) {
        for (e = 0; e <= document.getElementsByTagName("FundName").length; e++) {
          return (root.getElementsByTagName("FundName").length &&
            root.getElementsByTagName("FundName")[e].childNodes.length &&
            root.getElementsByTagName("FundName")[e].childNodes[e].nodeValue
          ) || '';
        }
      }

      function smartValue6(root, tag) {
        for (f = 0; f <= document.getElementsByTagName("FundCode").length; f++) {
          return (root.getElementsByTagName("FundCode").length &&
            root.getElementsByTagName("FundCode")[f].childNodes.length &&
            root.getElementsByTagName("FundCode")[f].childNodes[f].nodeValue
          ) || '';
        }
      }


      var i;
      var xmlDoc = xml.responseXML;
      var xmlDoc1 = xml.responseXML;
      var xmlDoc2 = xml.responseXML;
      var table = "<tr><th>Instructing Org</th><th>Portfolio</th><th>Fund</th></tr>";
      var x = xmlDoc.getElementsByTagName("ClientInvestmentInstruction");
      var y = xmlDoc1.getElementsByTagName("Portfolio");
      var z = xmlDoc2.getElementsByTagName("Fund");
      for (i = 0; i < x.length; i++) {
        table += "<tr><td>" +

          smartValue1(x[i], "InstructingOrgName") +
          "&nbsp; (" +

          smartValue2(x[i], "InstructingOrgCode") +
          ") </td><td>" +
          for (a = 0; a < y.length; y++) {

            smartValue3(x[i], "PortfolioName") +
              "&nbsp (" +

              smartValue4(x[i], "PortfolioCode") +
              ") </td><td> " +
              for (b = 0; b < z.length; z++) {
                smartValue5(x[i], "FundName") +
                  "&nbsp; (" +

                  smartValue6(x[i], "FundCode") +
                  ") </td></tr>"
              }
          }
      }
      document.getElementById("myTable").innerHTML = table;
    }
  </script>

</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<ClientInvestmentInstructionList>
    <ClientInvestmentInstruction>
        <InstructingOrgName>Sample A</InstructingOrgName>
        <InstructingOrgCode>Sample A code</InstructingOrgCode>
        <PortfolioList>
            <Portfolio>
                <PortfolioName>Sample A Child</PortfolioName>
                <PortfolioCode>Sample A Child code</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A Penultimate</FundName>
                        <FundCode>Sample A Penultimate code</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A1 Penultimate</FundName>
                        <FundCode>Sample A1 Penultimate code</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>

            <Portfolio>
                <PortfolioName>Sample B Child</PortfolioName>
                <PortfolioCode>Sample B Child code</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample B Penultimate</FundName>
                        <FundCode>Sample B Penultimate code</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample B1 Penultimate</FundName>
                        <FundCode>Sample B1 Penultimate code</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample B2 Penultimate</FundName>
                        <FundCode>Sample B2 Penultimate code</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
            <Portfolio>
                <PortfolioName>Sample C Child</PortfolioName>
                <PortfolioCode>Sample C Child code</PortfolioCode>
            </Portfolio>
        </PortfolioList>
    </ClientInvestmentInstruction>

    <ClientInvestmentInstruction>
        <InstructingOrgName>Sample part 2</InstructingOrgName>
        <InstructingOrgCode>Sample part 2 code</InstructingOrgCode>
        <PortfolioList>
            <Portfolio>
                <PortfolioName>Sample part 2 child</PortfolioName>
                <PortfolioCode>Sample part 2 child code</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample part 2 penultimate</FundName>
                        <FundCode>Sample part 2 penultimate code</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample part 2a penultimate</FundName>
                        <FundCode>Sample part 2a penultimate code</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
            <Portfolio>
                <PortfolioName>Sample part 3 child</PortfolioName>
                <PortfolioCode>Sample part 3 child code</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample part 3 penultimate</FundName>
                        <FundCode>Sample part 3 penultimate code</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample part 3a penultimate</FundName>
                        <FundCode>Sample part 3a penultimate code</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
        </PortfolioList>
    </ClientInvestmentInstruction>
</ClientInvestmentInstructionList>

最佳答案

您在 smartValueN 循环中超传递了一个 undefined index ,并且您试图在循环内返回值,除此之外,循环会因 return 而中断,而不是在 root 中通过标签名称获取元素,而是尝试在 document 中获取相同的元素。

smartValue3 的解决方案:

var result = "";

for (var i = 0, p; p = root.getElementsByTagName("PortfolioName")[i]; i++) {
    result += (
        p.childNodes.length && p.childNodes[i].nodeValue
    ) || '';
}

return result;

还有一个错字

for (b = 0; b < z.length; z++) {/*...*/}

for 语句不应出现在要递增值的表达式中,因此:

 2 + for (b = 0; b < z.length; z++) {/*...*/}

导致此语法错误:

Uncaught SyntaxError: Unexpected token for

typos

但它是固定的here !

关于javascript - 使用 AJAX 解析 XML 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38941682/

相关文章:

javascript - parse.com javascript 中的用户安全

Javascript : How can i add "&times;" in a button using javascript

javascript - 在 AngularJS 应用程序中的多个 ng-views 上使用 Bootstrap Datetimepicker DOM 对象

javascript - 当浏览器失去焦点时,Chrome(也许是 Safari?)在输入字段上触发 "blur"两次

javascript - 剑道 : Direction property for context main menu

javascript - Jquery 无法识别菜单包括

javascript - Angular.js 上 ng-repeat 指令中的 if 语句

javascript - 防止函数在从 ajax 再次调用后多次运行

javascript - 使用ajax获取自定义404错误页面的内容

javascript - 如何使用ajax调用获取数组列表数据(将数组列表数据 Controller 传递给ajax方法)