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

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

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

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

数据如下：

XML：

  Sample A1   Sample A-1 Child   Sample A-1 Sub-child   Sample A-1 Sub-child 2     Sample A-1 Child 2   Sample A-1 Sub-child 3   Sample A-1 Sub-child 4  Sample A-1 Sub-child 5     Sample A-1 Child 3     Sample A-2   Sample A-2 Child   Sample A-2 Sub-child   Sample A-2 Sub-child 2     Sample A-2 Child 2   Sample A-2 Sub-child 3   Sample A-2 Sub-child 4       

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

那个怎么样？

 /* XML parsed structure, equivalent of xhr.responseXML */ var structure = new DOMParser().parseFromString('\ \ Sample\ A1\ \ \ Sample A-1\ Child\ \ \ Sample A-1\ Sub-child\ \ \ Sample A-1\ Sub-child 2\ \ \ \ \ \ Sample A-1\ Child 2\ \ \ Sample A-1\ Sub-child 3\ \ \ Sample A-1\ Sub-child 4\ \ Sample A-1\ Sub-child 5\ \ \ \ \ Sample A-1\ Child 3\ \ \ \ \ \ Sample\ A-2\ \ \ Sample A-2\ Child\ \ \ Sample A-2\ Sub-child\ \ \ Sample A-2\ Sub-child 2\ \ \ \ \ Sample A-2\ Child 2\ \ \ Sample A-2\ Sub-child 3\ \ \ Sample A-2\ Sub-child 4\ \ \ \ \ \ ', "text/xml"); /* Get text of XML node */ function getText(node) { return node.childNodes[0].nodeValue; } /* Initial HTML buffer */ var htmlBuffer = "\ \ \  \ \ "; /* 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 += ""; /* Declare the Sample A data */ htmlBuffer += ""; /* Declare Sample B data */ htmlBuffer += ""; /* 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 ? "" : "") + ""; } } /* Leave Sample C empty */ else htmlBuffer += ""; /* Portfolio/fund end */ htmlBuffer += ""; } htmlBuffer += ""; } htmlBuffer += ""; // For tests document.body.innerHTML = htmlBuffer;
Sample A
Sample B
Sample C
"; /* * 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 += "
" + getText(portfolio.getElementsByTagName('PortfolioName')[0]) + " " + getText(portfolio.getElementsByTagName('PortfolioCode')[0]) + "
" htmlBuffer += getText(fund.getElementsByTagName('FundName')[0]) + " " + getText(fund.getElementsByTagName('FundCode')[0]); htmlBuffer += "
 

 table, thead, tr, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } thead { background-color: #BBB; }