使用AJAX解析XML數據

我想以表格格式顯示XML數據，下面是我編寫的代碼，但它不起作用。來自XML的數據被分支出來，因此並沒有完全顯示出來 - 但是在我目前的代碼中沒有任何東西被返回。使用AJAX解析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>

來源

2016-08-14 Deepanshu Kaushik

代碼的後面部分包含我在代碼中使用的XML內容。 –

@nicematt - 您將XML聲明（可選）與Content-Type響應頭混淆。 – Quentin

@Quentin我還沒有看到在op中聲明的XML ...我總是dumby >> – Hydro

你ultrapassing在smartValueN循環未定義的索引，你想在循環中返回值，除此之外環路將與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

，但它的固定here！

來源

2016-08-14 11:54:32 Hydro

謝謝@nicematt你有可用的地方，你可能已經測試過它。 –

@DeepanshuKaushik我會做一個......檢查編輯也是：D – Hydro

是的，我收到同樣的錯誤，但我們應該如何遍歷分支節點的所有值。如果我不使用for循環，它將返回「0」作爲兩列的值。 –

使用AJAX解析XML數據

回答

相關問題