以表格格式显示XML和JSON中的数据

本文介绍了以表格格式显示XML和JSON中的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我希望以表格的形式显示我们从XML和JSON文件中检索的数据： jsfiddle/daksh844/hrw85ck5/

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

布局应与小提琴上的布局完全相同。我坚持在表格中获得这种布局。请分享两种情况（XML和JSON）的见解。

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).

我尝试过这个 jsfiddle/daksh844/jgmw6we4/4/ 但无法以完全相同的布局显示数据。

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

数据如下：

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

推荐答案

怎么样？

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