Search code examples
javascriptrestapieuropepmc

Transforms Europe PMC RESTful "search" responses to source/external-id lists

I would like to use Europe PMC RESTful API to transforms "search" responses to source/external-id lists, with one-line per record text.

Any suggestions / examples (in JavaScript)?

Solution

  • You can use XSLT to transform the response you get from the Europe PMC RESTful API.

    You can find an example written in Vue.js on JSBin, where you can find the example XSL file, and how to transform the XML response to an ID list in JavaScript as below:

    Example XSL

    <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <!-- 
        Script: rest2ids.xsl
        Version: 1.0
        Summary: Transforms Europe PMC RESTful "search" responses to source/external-id lists, with one-line per record text.
        Notes: Either resulttype=lite or resulttype=core paramater can used
    -->
   <xsl:output method="text" encoding="UTF-8" />
   <xsl:param name="idMode" select="1" />
   <!-- 1 = Format IDs as on the front end, 2 = Format IDs for using Excel to generate External Links data -->
   <xsl:variable name="newline" select="'&#xD;&#xA;'" />
   <xsl:template match="/">
      <xsl:for-each select="/responseWrapper/resultList/result">
         <xsl:choose>
            <xsl:when test="$idMode=1 and source/text()='MED'">
               <xsl:text>PMID</xsl:text>
            </xsl:when>
            <xsl:when test="$idMode=1 and (source/text()='PMC')">
               <xsl:text>PMCID</xsl:text>
            </xsl:when>
            <xsl:otherwise>
               <xsl:value-of select="source/text()" />
            </xsl:otherwise>
         </xsl:choose>
         <xsl:choose>
            <xsl:when test="$idMode=1">
               <xsl:text>:</xsl:text>
            </xsl:when>
            <xsl:otherwise>
               <xsl:text />
            </xsl:otherwise>
         </xsl:choose>
         <xsl:value-of select="id/text()" />
         <!-- Output PMCID -->
         <xsl:choose>
            <xsl:when test="$idMode=1 and source/text()='MED'">
               <xsl:if test="pmcid != ''">
                  <xsl:text>,PMCID:</xsl:text>
                  <xsl:value-of select="pmcid/text()" />
               </xsl:if>
            </xsl:when>
            <xsl:otherwise />
         </xsl:choose>
         <!-- End of outputting PMCID -->
         <xsl:value-of select="$newline" />
      </xsl:for-each>
   </xsl:template>
</xsl:stylesheet>

    HTML

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <title>JS Bin</title>
   </head>
   <body>
      <div id="app">
         <input type="text" size="70" v-model="url">
         <fieldset>
            <legend>Output</legend>
            <textarea id="output" cols="56" rows="10" v-model="output"></textarea>
         </fieldset>
         <button @click="downloadData">Download</button>
      </div>
   </body>
</html>

    Vue.js

    var app = new Vue({
    el: '#app',
    data() {
        return {
            url: "https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=cancer",
            xhttp: {},
            output: ''
        };
    },
    watch: {
        url: function() {
            this.output = this.transform();
        }
    },
    created() {
        if (window.ActiveXObject) {
            this.xhttp = new window.ActiveXObject("Msxml2.XMLHTTP");
        } else {
            this.xhttp = new XMLHttpRequest();
        }
    },
    methods: {
        loadXMLDoc: function(filename) {
            this.xhttp.open("GET", filename, false);
            try {
                this.xhttp.responseType = "msxml-document";
            } catch (err) {}
            this.xhttp.send("");
            return this.xhttp.responseXML;
        },
        download: function(filename, text) {
            let element = document.createElement('a');
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
            element.setAttribute('download', filename);
            element.style.display = 'none';
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);
        },
        downloadData: function() {
            this.download('idlist.txt', this.output);
        },
        transform: function() {
            let xml = this.loadXMLDoc(this.url);
            let xsl = this.loadXMLDoc("https://yucigou.github.io/staticfs/xsl/rest2ids.xsl");
            if (window.ActiveXObject || this.xhttp.responseType === "msxml-document") {
                return xml.transformNode(xsl);
            } else if (document.implementation && document.implementation.createDocument) {
                // code for Chrome, Firefox, Opera, etc.
                let xsltProcessor = new XSLTProcessor();
                xsltProcessor.importStylesheet(xsl);
                let resultDocument = xsltProcessor.transformToFragment(xml, document);
                return resultDocument.textContent;
            }          
        }
    },
    mounted () {
        this.output = this.transform();
    }
});

    When you run this example in a browser, you will see the output:

    enter image description here

    You can change the query to see the output being updated, and you can also download it to a file as shown above.