Displaying data from XML and JSON in table format

Question

I want to display data that we retrieve from XML and JSON files in the form of a table as featured on this fiddle: https://jsfiddle.net/daksh844/hrw85ck5/

The layout should be exactly the same as on the fiddle. I'm stuck on getting this layout in a table. Please share the insight for both cases (XML and JSON).

I've tried working on this https://jsfiddle.net/daksh844/jgmw6we4/4/ but unable to display the data in exact same layout.

The data is as follows:

XML:

<ClientInvestmentInstructionList>
    <ClientInvestmentInstruction>
        <InstructingOrgName>Sample</InstructingOrgName>
        <InstructingOrgCode>A1</InstructingOrgCode>
        <PortfolioList>
            <Portfolio>
                <PortfolioName>Sample A-1</PortfolioName>
                <PortfolioCode>Child</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 2</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>

            <Portfolio>
                <PortfolioName>Sample A-1</PortfolioName>
                <PortfolioCode>Child 2</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 3</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 4</FundCode>
                    </Fund><Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 5</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
            <Portfolio>
                <PortfolioName>Sample A-1</PortfolioName>
                <PortfolioCode>Child 3</PortfolioCode>
            </Portfolio>
        </PortfolioList>
    </ClientInvestmentInstruction>

    <ClientInvestmentInstruction>
        <InstructingOrgName>Sample</InstructingOrgName>
        <InstructingOrgCode>A-2</InstructingOrgCode>
        <PortfolioList>
            <Portfolio>
                <PortfolioName>Sample A-2</PortfolioName>
                <PortfolioCode>Child</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child 2</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
            <Portfolio>
                <PortfolioName>Sample A-2</PortfolioName>
                <PortfolioCode>Child 2</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child 3</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child 4</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
        </PortfolioList>
    </ClientInvestmentInstruction>
</ClientInvestmentInstructionList>

JSON:

{"ClientInvestmentInstructionList": {
    "ClientInvestmentInstruction": [
      {
        "InstructingOrgName": "Sample",
        "InstructingOrgCode": "A1",
        "PortfolioList": {
          "Portfolio": [
            {
              "PortfolioName": "Sample A-1",
              "PortfolioCode": "Child",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child"
                  },
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 2"
                  }
                ]
              }
            },
            {
              "PortfolioName": "Sample A-1",
              "PortfolioCode": "Child 2",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 3"
                  },
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 4"
                  },
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 5"
                  }
                ]
              }
            },
            {
              "PortfolioName": "Sample A-1",
              "PortfolioCode": "Child 3"
            }
          ]
        }
      },
      {
        "InstructingOrgName": "Sample",
        "InstructingOrgCode": "A-2",
        "PortfolioList": {
          "Portfolio": [
            {
              "PortfolioName": "Sample A-2",
              "PortfolioCode": "Child",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child"
                  },
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child 2"
                  }
                ]
              }
            },
            {
              "PortfolioName": "Sample A-2",
              "PortfolioCode": "Child 2",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child 3"
                  },
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child 4"
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  }

What have you already tried? You just posted the data form and XML processing. Do you use any framework or just plain javascript? — n32303
– n32303, Commented Aug 19, 2016 at 12:41
I've already tried this- jsfiddle.net/daksh844/jgmw6we4/4 I'm using plain javascript with AJAX methods. you're free to try this out with jQuery if you want. Thanks — Deepanshu Kaushik
– Deepanshu Kaushik, Commented Aug 19, 2016 at 12:43

score 1 · Accepted Answer · 2016-08-19 14:46:59Z

What about that?

/* XML parsed structure, equivalent of xhr.responseXML */
var structure = new DOMParser().parseFromString('<ClientInvestmentInstructionList>\
    <ClientInvestmentInstruction>\
        <InstructingOrgName>Sample</InstructingOrgName>\
        <InstructingOrgCode>A1</InstructingOrgCode>\
        <PortfolioList>\
            <Portfolio>\
                <PortfolioName>Sample A-1</PortfolioName>\
                <PortfolioCode>Child</PortfolioCode>\
                <AuthorizeFundList>\
                    <Fund>\
                        <FundName>Sample A-1</FundName>\
                        <FundCode>Sub-child</FundCode>\
                    </Fund>\
                    <Fund>\
                        <FundName>Sample A-1</FundName>\
                        <FundCode>Sub-child 2</FundCode>\
                    </Fund>\
                </AuthorizeFundList>\
            </Portfolio>\
\
            <Portfolio>\
                <PortfolioName>Sample A-1</PortfolioName>\
                <PortfolioCode>Child 2</PortfolioCode>\
                <AuthorizeFundList>\
                    <Fund>\
                        <FundName>Sample A-1</FundName>\
                        <FundCode>Sub-child 3</FundCode>\
                    </Fund>\
                    <Fund>\
                        <FundName>Sample A-1</FundName>\
                        <FundCode>Sub-child 4</FundCode>\
                    </Fund><Fund>\
                        <FundName>Sample A-1</FundName>\
                        <FundCode>Sub-child 5</FundCode>\
                    </Fund>\
                </AuthorizeFundList>\
            </Portfolio>\
            <Portfolio>\
                <PortfolioName>Sample A-1</PortfolioName>\
                <PortfolioCode>Child 3</PortfolioCode>\
            </Portfolio>\
        </PortfolioList>\
    </ClientInvestmentInstruction>\
\
    <ClientInvestmentInstruction>\
        <InstructingOrgName>Sample</InstructingOrgName>\
        <InstructingOrgCode>A-2</InstructingOrgCode>\
        <PortfolioList>\
            <Portfolio>\
                <PortfolioName>Sample A-2</PortfolioName>\
                <PortfolioCode>Child</PortfolioCode>\
                <AuthorizeFundList>\
                    <Fund>\
                        <FundName>Sample A-2</FundName>\
                        <FundCode>Sub-child</FundCode>\
                    </Fund>\
                    <Fund>\
                        <FundName>Sample A-2</FundName>\
                        <FundCode>Sub-child 2</FundCode>\
                    </Fund>\
                </AuthorizeFundList>\
            </Portfolio>\
            <Portfolio>\
                <PortfolioName>Sample A-2</PortfolioName>\
                <PortfolioCode>Child 2</PortfolioCode>\
                <AuthorizeFundList>\
                    <Fund>\
                        <FundName>Sample A-2</FundName>\
                        <FundCode>Sub-child 3</FundCode>\
                    </Fund>\
                    <Fund>\
                        <FundName>Sample A-2</FundName>\
                        <FundCode>Sub-child 4</FundCode>\
                    </Fund>\
                </AuthorizeFundList>\
            </Portfolio>\
        </PortfolioList>\
    </ClientInvestmentInstruction>\
</ClientInvestmentInstructionList>', "text/xml");

/* Get text of XML node */
function getText(node) {
    return node.childNodes[0].nodeValue;
}

/* Initial HTML buffer */
var htmlBuffer = "<table>\
                     <thead><tr>\
                         <td>Sample A</td>\
                         <td>Sample B</td> \
                         <td>Sample C</td>\
                     </tr></thead><tbody>";


/* Iterate each client investment instruction */
for (var instruction of structure.getElementsByTagName('ClientInvestmentInstruction')) {

    var headerDeclared = false;

  
    /* Iterate each portfolio */
    for (var portfolio of instruction.getElementsByTagName('Portfolio')) {

        htmlBuffer += "<tr>";

        /* Declare the Sample A data */
        htmlBuffer += "<td>";
        /*
         * If InstructingOrgName and code aren't declared,
         * declare both then
        */
        if (!headerDeclared) {
            htmlBuffer += getText(instruction.getElementsByTagName('InstructingOrgName')[0]) + " " +
                          getText(instruction.getElementsByTagName('InstructingOrgCode')[0]);
            headerDeclared = true;
        }
        htmlBuffer += "</td>";

        /* Declare Sample B data */
        htmlBuffer += "<td>" + getText(portfolio.getElementsByTagName('PortfolioName')[0]) + " " +
                               getText(portfolio.getElementsByTagName('PortfolioCode')[0]) +
                      "</td>";

        /* Get funds */
        var FundList = portfolio.getElementsByTagName('Fund');

        /* Check if any funds exist */
        if (FundList.length) {

            /* Iterate each fund */
            for (var i = 0, fund; fund = FundList[i]; i++) {

              /* Declare fund in Sample C data */
                htmlBuffer += (i > 0 ? "</tr><tr><td></td><td></td>" : "") + "<td>"

                htmlBuffer += getText(fund.getElementsByTagName('FundName')[0]) + " " +
                              getText(fund.getElementsByTagName('FundCode')[0]);

                htmlBuffer += "</td>";

            }
        }
        /* Leave Sample C empty */
        else
            htmlBuffer += "<td></td>";

        /* Portfolio/fund end */
        htmlBuffer += "</tr>";
    }

    htmlBuffer += "<tr><td></td><td></td><td></td></tr>";

}

htmlBuffer += "</tbody>";

// For tests
document.body.innerHTML = htmlBuffer;

table, thead, tr, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 15px;
}

thead {
  background-color: #BBB;
}

Thank you so much @nicematt Can you please share your insight on XML as well, it would be of great help.

Collectives™ on Stack Overflow

Displaying data from XML and JSON in table format

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related