XML data parsing using AJAX

Question

I would like to display XML data in table format, below is the code which I've written but it's not working. The data from XML is branched out and thus was not appearing completely earlier - but in my current code nothing is getting returned.

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

The later portion of the code contains the XML content which I've used in the code. — Deepanshu Kaushik
– Deepanshu Kaushik, Commented Aug 14, 2016 at 11:22
@nicematt — You are confusing the XML declaration (which is optional) with the Content-Type response header. — Quentin
– Quentin, Commented Aug 14, 2016 at 11:24
@Quentin I haven't seen the XML declared in the op... i'm always dumby >> — user5066707
– user5066707, Commented Aug 14, 2016 at 11:25
Thanks it has the <?xml> header. Any idea how can we display branched out XML data without missing any entry. As before using for in SmartValue function I was using exact location (eg [0]) , but that only returned the first entry not entire branched out data. — Deepanshu Kaushik
– Deepanshu Kaushik, Commented Aug 14, 2016 at 11:25
I'm facing the problem inside smartValue function when using for loop for the last for functions and when I try to pass the value later on in the script. During debugging I'm unable to navigate to the issue. The final output I want is to display a table with all the values that are in XML file. Hope this helps. — Deepanshu Kaushik
– Deepanshu Kaushik, Commented Aug 14, 2016 at 11:50

score 1 · Accepted Answer · 2016-08-14 14:36:26Z

1

You're ultrapassing a undefined index in the smartValueN loops, and you're trying to return values inside a loop, besides this the loop would break with return, and instead of getting elements by tag name in root, you try to get the same in document.

Solution for the smartValue3:

var result = "";

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

return result;

And there's a typo in

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

The for statement isn't expected in expressions where values are to be incremented, so:

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

results in this syntax error:

Uncaught SyntaxError: Unexpected token for

but it's fixed here!

edited Aug 14, 2016 at 14:36

answered Aug 14, 2016 at 11:54

user5066707

Sign up to request clarification or add additional context in comments.

9 Comments

Deepanshu Kaushik Over a year ago

Thanks @nicematt do you have a fiddle available where you might have tested it out.

user5066707 Over a year ago

@DeepanshuKaushik I'll make one... check the edit also :D

Deepanshu Kaushik Over a year ago

Yes I'm receiving the same error, but how shall we traverse through all the values for the branched nodes. If I don't use for loop it returns "0" as the value for both columns.

user5066707 Over a year ago

@DeepanshuKaushik You need to construct a string with each loop you made modifying the other strings such as smartValue5(x[i], "FundName") + "  (". I'm still doing the fiddle...

Deepanshu Kaushik Over a year ago

Hi @nicematt Please refer to this question it contains both XML and JSON data file. stackoverflow.com/questions/39038595/… Thanks.

|

Collectives™ on Stack Overflow

XML data parsing using AJAX

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related