Affichage de données XML et JSON sous forme de tableau

Question

Je souhaite afficher les données que nous récupérons à partir de fichiers XML et JSON sous la forme d'un tableau, comme le montre cette astuce : https://jsfiddle.net/daksh844/hrw85ck5/

La disposition doit être exactement la même que sur le violon. Je ne parviens pas à obtenir cette mise en page dans un tableau. Merci de partager votre expérience dans les deux cas (XML et JSON).

J'ai essayé de travailler sur ce sujet https://jsfiddle.net/daksh844/jgmw6we4/4/ mais il n'est pas possible d'afficher les données exactement de la même manière.

Les données sont les suivantes :

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"
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  }

Answer 1

Qu'en est-il ?

/* 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;
}