4

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

enter image description here

what I want to achieve enter image description here

Improve this question
0

2 Answers 2

Reset to default
2
+25

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Is XSLT able to loop? 2 dimensional?
I got one extra dimension or loop in profileName . So I am not sure 2 dimensional table is enough
Your updated XML in link is not well-formed and hence invalid. You have some double quotes stuck in opening node tags.
Oh yes , When I deleting some of the sensitive info , but it’s basically what it is .
See updated XSLT and its HTML output when linked XML is removed of double quotes in tags.
|
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:

  1. Extract the Data as we need it from the existing XML
  2. 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/

Improve this answer

7 Comments

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] .
I got the file in HTML as shown, but I cant make it form the example table like above?(what I wanna achieve )
I've update my fiddle, just have to edit the answer.
what thats awsome , i am just wondering is parserXML allows URL data link?
i couldnt pass the XML as URL ... is there anyway to do it?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.