How to create a multidimensional array table from XML?

Question

I am trying to create a 2 D array from XML and render it into the HTML page, as you can see on the first image, I managed to extract the data from XML file. but the table values are duplicated. how do I avoid that? any Suggestion is helped. thanks

for (var y = 0; y < 10; y++) {
    table_summary += "<tr><td style='color:blue'>" + s[y].getElementsByTagName("_portfolioName")[0].childNodes[0].nodeValue + "</td></tr>";

    for (var i = 0; i < x.length; i++) {

        table_summary += "<th></th><th style='color:orangered'>" + x[i].getElementsByTagName("_date")[0].childNodes[0].nodeValue + "</th>";
        var row = x[i];

        var MtmBefore = row.getElementsByTagName("MtmBefore")[0].childNodes[0].nodeValue;
        var MtmAfter = row.getElementsByTagName("MtmAfter")[0].childNodes[0].nodeValue;
        var ChangeMaturingTrades = row.getElementsByTagName("ChangeMaturingTrades")[0].childNodes[0].nodeValue;
        var ChangeNewTrades = row.getElementsByTagName("ChangeNewTrades")[0].childNodes[0].nodeValue;
        var ChangeCashflow = row.getElementsByTagName("ChangeCashflow")[0].childNodes[0].nodeValue;
        var ChangeTheta = row.getElementsByTagName("ChangeTheta")[0].childNodes[0].nodeValue;
        var ChangePosition = row.getElementsByTagName("ChangePosition")[0].childNodes[0].nodeValue;
        var ChangeMarket = row.getElementsByTagName("ChangeMarket")[0].childNodes[0].nodeValue;
        var ChangeOther = row.getElementsByTagName("ChangeOther")[0].childNodes[0].nodeValue;

        table_summary += "<tr><th>Mtm Before</th><td>" + MtmBefore + "</td></tr>" +
            "<th>Mtm After</th><td>" + MtmAfter + "</td></tr>" +
            "<th>Change Maturing Trades</th><td>" + ChangeMaturingTrades + "</td></tr>" +
            "</th><th>Change New Trades</th><td>" + ChangeNewTrades.slice(0, (ChangeNewTrades.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Cashflow</th><td>" + ChangeCashflow + "</td></tr>" +
            "<tr><th>Change Theta</th><td>" + ChangeTheta.slice(0, (ChangeTheta.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Position</th><td>" + ChangePosition.slice(0, (ChangePosition.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Market</th><td>" + ChangeMarket.slice(0, (ChangeMarket.indexOf(".")) + 3) + "</td></tr>" +
            "<tr><th>Change Other</th><td>" + ChangeOther.slice(0, (ChangeOther.indexOf(".")) + 3) + "</td></tr>";


        }
    }

XML file

what I want to achieve

Gaetano Piazzolla · Answer 1 · 2017-10-07T12:59:20.660

2

I've taken from this answer https://stackoverflow.com/a/8412989/2768318 the best practice to parse an xml String.

It's a JQUERY method to easily build javascript object from XML.
This is your XML formatted: https://pastebin.com/yySDn4QT (there were missing several tags).

Here is the jfiddle I've built: https://jsfiddle.net/rhneLsgL/ (update : https://jsfiddle.net/rhneLsgL/1/ )

var xml = $.parseXML("<ExtractSumm....");
// ....
$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        //debugger;
        return xml.documentElement;
    });
});

The documentElement is a javascript object with all useful function to pase an XML eg: you can access child elements, text, know how long is the list, how much element are for each type etc..

Starting from this, you can build easily your table, without using for each loops.

EDIT An example is in this fiddle: https://jsfiddle.net/rhneLsgL/5/ I've splitted the implementation in two parts:

Extract the Data as we need it from the existing XML
Write the table.

I swear the table is in the form that you need.

Edit2: I've added my solution to this to my personal Js Fiddle account to not lose it: https://jsfiddle.net/GaetanoPiazzolla/u40g8whx/

edited Oct 07 '17 at 12:59

answered Sep 30 '17 at 13:50

Gaetano Piazzolla

1,388
1
16
31

thanks for the response, Am I able to put them as the array , as you see on the skeleton image, for each profileName take the array of Date and attribute. so thats confusing for me to dig further into the data when i using the for loop x[i][j] . – Fenici Sep 30 '17 at 14:20
I got the file in HTML as shown, but I cant make it form the example table like above?(what I wanna achieve ) – Fenici Sep 30 '17 at 16:23
I've update my fiddle, just have to edit the answer. – Gaetano Piazzolla Sep 30 '17 at 17:47
what thats awsome , i am just wondering is parserXML allows URL data link? – Fenici Oct 01 '17 at 01:23
i couldnt pass the XML as URL ... is there anyway to do it? – Fenici Oct 01 '17 at 08:11
thanks for your answer, how do I Loop _portfolioName instead of date? and put the date as column attribute? – Fenici Oct 01 '17 at 13:55
The previous answer was not quite clear on how to pass it into parse XML ; – Fenici Oct 01 '17 at 14:01

Parfait · Answer 2 · 2017-10-01T16:14:01.567

Consider XSLT, the special-purpose lanaguage, designed to transform XML files to other XML, HTML, even CSV/TXT formats. Specifically with the Muenchian Grouping, you can pivot the data to your "2D" needs by indexing on element name of each child node of <_detail> since they will become each html table's rows.

Javascript can run XSLT as do most general-purpose languages (Java, C#, Perl, PHP, Python, VB) or you can call it as a processing instruction in XML to render as HTML via the browser:

<?xml-stylesheet type="text/xsl" href="myxsl.xsl"?>

While your posted XML example is not quite exactly what your attempt shows, below uses posted example that may apply to your actual source XML.

XSLT

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output indent="yes" method="html"/>
  <xsl:strip-space elements="*"/>

  <xsl:key name="elemid" match="_detail/*[local-name()!='alerts' and local-name()!='attributionResults']" use="local-name()" />

  <xsl:template match="/DecompExtractSummary">
    <html>
        <body>
            <table>
                <xsl:apply-templates select="_dateSets"/>
            </table>
        </body>
    </html>
  </xsl:template>

   <xsl:template match="_dateSets|DecompExtractSummaryDateSet">
        <xsl:apply-templates select="DecompExtractSummaryDateSet|_portfolioSummaries"/>
    </xsl:template>   

   <xsl:template match="_portfolioSummaries">
        <xsl:apply-templates select="DecompExtractSummaryDateSetDetail"/>
    </xsl:template>   

   <xsl:template match="DecompExtractSummaryDateSetDetail">
        <xsl:apply-templates select="_detail/*[generate-id() = generate-id(key('elemid', local-name()))]"/>
    </xsl:template>     

  <xsl:template match="_detail/*[local-name()!='alerts' and local-name()!='attributionResults']"> 
    <tr>
        <td><xsl:value-of select="local-name()"/></td>
        <xsl:for-each select="key('elemid', local-name())">         
            <td><xsl:value-of select="."/></td>
        </xsl:for-each>         
    </tr>
  </xsl:template>

</xsl:stylesheet>

HTML

<html><body><table>
<tr>
<td>calcDate1</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-19T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
</tr>
<tr>
<td>calcDate2</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-20T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-21T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-22T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>0001-01-01T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
<td>2017-09-25T00:00:00</td>
</tr>
<tr>
<td>currency</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
<td>USD</td>
</tr>
<tr>
<td>exchangeRate</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>MtmBefore</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-23.3</td>
<td>-4.5</td>
<td>-2.4</td>
<td>0</td>
<td>3.3</td>
<td>0</td>
<td>1199.22</td>
<td>-99.1</td>
<td>-22.22</td>
<td>-99.22</td>
<td>-22330.22</td>
<td>-3</td>
<td>-970</td>
<td>-22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-23</td>
<td>-1018</td>
<td>-45</td>
<td>-790</td>
<td>-44</td>
<td>-834</td>
<td>0</td>
<td>-1050</td>
<td>0</td>
<td>-105</td>
<td>-2.9</td>
<td>-84</td>
<td>-2</td>
</tr>
<tr>
<td>MtmAfter</td>
<td>-12.23</td>
<td>-4.23</td>
<td>-45.56</td>
<td>0</td>
<td>23.23</td>
<td>0</td>
<td>23.2</td>
<td>-23.23</td>
<td>-23.23</td>
<td>-23.23</td>
<td>-34.34</td>
<td>-3.2</td>
<td>-4.33</td>
<td>-224.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-231.3</td>
<td>-22.3</td>
<td>-22.22</td>
<td>-22.3</td>
<td>-44.3</td>
<td>-8630</td>
<td>0</td>
<td>-105</td>
<td>0</td>
<td>-105</td>
<td>-264.9</td>
<td>-8804</td>
<td>-26.9</td>
<td>-36089</td>
<td>-4030</td>
<td>-7643</td>
<td>-78</td>
<td>650</td>
<td>0</td>
<td>65</td>
<td>0</td>
<td>-765</td>
<td>-7</td>
</tr>
<tr>
<td>ChangeMaturingTrades</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>2.4</td>
<td>12.22</td>
<td>0</td>
<td>3.22</td>
<td>0</td>
<td>22.22</td>
<td>-99.3</td>
<td>22.3</td>
<td>-22.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-23</td>
<td>-456</td>
<td>-45</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-29</td>
<td>-264.9</td>
<td>-2</td>
</tr>
<tr>
<td>ChangeNewTrades</td>
<td>-23.23</td>
<td>-23.232</td>
<td>-34.35</td>
<td>0</td>
<td>23.23</td>
<td>0</td>
<td>23.23</td>
<td>-23.23</td>
<td>-232.23</td>
<td>-23.23</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-224.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-231.4</td>
<td>-456.22</td>
<td>-22.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-105</td>
<td>0</td>
<td>-105</td>
<td>-264.9</td>
<td>-131</td>
<td>-64.9</td>
<td>900</td>
<td>0</td>
<td>900</td>
<td>-78</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>82</td>
<td>-7</td>
</tr>
<tr>
<td>ChangeCashflow</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>ChangeTheta</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-3.34</td>
<td>388.1</td>
<td>-33.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-26.22</td>
<td>0</td>
<td>-101.2</td>
<td>-224.3</td>
<td>-325</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-32</td>
<td>0</td>
<td>65</td>
<td>-67</td>
<td>-1</td>
<td>0</td>
<td>32.876712328757662</td>
<td>0</td>
<td>32</td>
<td>0</td>
<td>18</td>
<td>0</td>
</tr>
<tr>
<td>ChangePosition</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>ChangeMarket</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-3.3</td>
<td>22.3</td>
<td>-3.22</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-5098.22</td>
<td>0</td>
<td>-22.2</td>
<td>2.22</td>
<td>-7688</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>-7687</td>
<td>0</td>
<td>3437</td>
<td>-3481</td>
<td>-43</td>
<td>0</td>
<td>171</td>
<td>0</td>
<td>171</td>
<td>0</td>
<td>12</td>
<td>0</td>
</tr>
<tr>
<td>ChangeOther</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>3.34</td>
<td>-2.23</td>
<td>22.3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>22.22</td>
<td>0</td>
<td>-8.22</td>
<td>22</td>
<td>21</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>213</td>
<td>0</td>
<td>-10</td>
<td>-46</td>
<td>-149</td>
<td>0</td>
<td>-5</td>
<td>0</td>
<td>-5</td>
<td>0</td>
<td>-15</td>
<td>0</td>
</tr>
</table></body></html>

I got one extra dimension or loop in profileName . So I am not sure 2 dimensional table is enough — Fenici, Oct 01 '17 at 15:48
Your updated XML in link is not well-formed and hence invalid. You have some double quotes stuck in opening node tags. — Parfait, Oct 01 '17 at 15:51
Oh yes , When I deleting some of the sensitive info , but it’s basically what it is . — Fenici, Oct 01 '17 at 15:53
See updated XSLT and its HTML output when linked XML is removed of double quotes in tags. — Parfait, Oct 01 '17 at 16:14

How to create a multidimensional array table from XML?

2 Answers2