Search code examples
javascriptxmlhttpxsltxmlhttprequest

Best strategy for displaying and searching XML data as an HTML table

I am trying to define the best overall strategy to display XML-based terminological entries as a searchable table in an HTML page.

It is important that the chosen strategy can:

  • reproduce the attributes and their associated styles (for example, the value "unattested" should make the associated term grey, or the property part should reproduce its value in italics after the term);
  • allow the user to subsequently filter entries according to their query typed into a search field (or a search field at the top of each column);
  • include synonymous terms (i.e. more than one term for the same concept in the same language) within a single cell.

Here is an example of one entry (each entry is encapsulated within a <concept>):

<concept>
    <expression>
        <OE>
            <term>efes</term>
            <term status="unattested">æfesc</term>
        </OE>
        <ME>
            <term>eaves/term>
        </ME>
    </expression>
    <classification>
        <characteristic part="noun">section of a roof overhanging the lower structure of a building</characteristic>
    </classification>
</concept>

I know of two possible strategies.

Strategy A: Convert the XML using XSLT into an HTML page, which I will then upload to the server. Integrate JavaScript into the HTML that can show/hide entries based on the user's query.

Strategy B: Upload both the XML (as data source) and an HTML page. Integrate an XMLHttpRequest object into the HTML to load the XML data and build a table to contain it. I have tried a mockup of this strategy, but have been unable to access deeper elements such as <term>. I am aware that XMLHttpRequest has a send() function, but not sure if this could be used to filter the XML data based on the user's query.

Your advice for the best strategy for this particular case is much appreciated.

Solution

  • You could consider client-side XSLT 3.0 for this using SaxonJS. The benefits are (a) no Javascript needed, (b) no server-side logic needed. With SaxonJS you can do all the client-side event handling using XSLT.

    I'm assuming here that the size of the XML data is such that you can download it all without undue delay (say 1Mb compressed). It will be cached by the browser, of course. If the XML is larger than this then you'll probably want to load it incrementally. But you might be able to get away with splitting it into 26 files for terms A-Z, for example.

    Caveat: SaxonJS is my company's product.