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を見たことがありません...私はいつもダムビーです>> – Hydro

あなたはsmartValueNループで未定義のインデックスをultrapassingしている、とあなたは、ループ内の値を返すようにしようとしている、この他にもループが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私は1つ作成します。また、編集を確認してください：D – Hydro

はい同じエラーが発生しますが、分岐ノードのすべての値をどのようにトラバースする必要がありますか。 forループを使用しないと、両方のカラムの値として "0"が返されます。 –

AJAXを使用したXMLデータの解析

答えて

関連する問題