Question

I believe I have a very interesting problem to solve. I’ve a XML something like this :

<elements>
  <element name="nam1" val="John" xpos="10" ypos="10" />
  <element name="nam3" val="Mark" xpos="10" ypos="30" />
  <element name="nam4" val="Rick" xpos="50" ypos="30" />
  <element name="nam5" val="Jeff" xpos="10" ypos="50" />
  <element name="nam6" val="Dean" xpos="50" ypos="50" />
  <element name="nam2" val="Scott" xpos="50" ypos="10" />

The positions of the elements in the xml may not be sequential.

I’ve to convert this into a HTML table. The contents of the TRs and TDs need to be “dynamically” set based on xpos and ypos attributes of the XML .. output should be something like this :

<table>
    <tr>
       <td>John</td><td>Scott</td>
    </tr>
    <tr>
       <td>Mark</td><td>Rick</td>
    </tr>
    <tr>
       <td>Jeff</td><td>Dean</td>
    </tr>
</table>

Things get more complicated when the xpos or ypos are not exactly same, but slightly different for 2 adjoining elements ..
e.g.

<elements>
  <element name="nam1" val="John" xpos="10" ypos="12" />
  <element name="nam3" val="Mark" xpos="11" ypos="30" />
  <element name="nam4" val="Rick" xpos="53" ypos="32" />
  <element name="nam5" val="Jeff" xpos="09" ypos="52" />
  <element name="nam6" val="Dean" xpos="51" ypos="51" />
  <element name="nam2" val="Scott" xpos="50" ypos="10" />
</elements>

Any ideas how do I achieve this ? using xslt or Java/Javascript dom parser ? or anything else ? and how ?

Answer 1

I wouldn’t dare to attempt to solve this with XSLT – XSLT is good for simple, basic transformations. While it might be possible to pull it off, it will probably drive you insane in the process.

As for solving it at all:

1. Use rounding or similar methods to solve the “off by 1/2” problem
2. Sort the data.
3. Creating a table out of the sorted data should be trivial

Now, I expect you to ask “and without sorting?” (because it’s too expensive, whatever). Answer: You will sort the data, one way or another. Creating a huge map in memory and add elements to it based on the coordinate is sorting. It’s just non-obvious.

[EDIT] Maybe this trick will also work: Instead of a table, use div with position: absolute and scale the coordinates until the texts no longer overlap. That will emulate a table but whether it works for you depends on whether the coordinates actually mean something (i.e. they aren’t random but some other system uses them to lay out the data)