![\"\"](\"/assets/images/mcspils_jsonOutput.png\")
The purpose of a web service is that you give it a question or task, and that it returns an answer. For example, we can ask the\nOpen PHACTS platform what compounds it knows with aspirin in the name. We pass the question (with the\nAPI key) and get a list of matching compounds.\nNow, this communication is complex: it happens at many levels, which are spelled out in the\nInternet Model. There are various variants of the stack of communication layers,\nbut we are interested mostly in the top layers, at the application layer. In fact, for this course this model only serves as\nsupporting information for those who want to learn more.
\n\nPractically, what matters here is how to ask the question and how to understand the answer.
\n\nWe are supported in these practicalities with JavaScript libraries, in particular the ops.js\nlibrary and general JSON functionality provided by most browsers (unless the student decided to use\na different programming language, in which there are different libraries). Personally, I have only very limited JavaScript experience,\nand this mostly goes back to the good old Userscript and Greasemonkey days (wow! the\npaper is actually the 4th highest scoring BMC Bioinformatics article!).\nBut because my JavaScript knowledge is limited and rusty, I spent a good part of today, to get a basic example running. Very basic,\nand barely exceeding the communication details. That is, this is the output in the browser:
\n\n
So, what does the question look like? The question is actually hardcoded in the HTML source, but the page does take two parameters:\nthe app_key and app_id that come with your Open PHACTS account.
The ops.js library helps us, and wraps the Open PHACTS LDA methods in JavaScript methods. Thus, rather can crafting special HTTP calls,\nwe use two JavaScript calls:
\n\nvar searcher = new Openphacts.ConceptWikiSearch(\n \"https://beta.openphacts.org\",\n params[\"app_id\"], params[\"app_key\"]\n);\nsearcher.byTag(\n 'Aspirin', '20', '4', '07a84994-e464-4bbf-812a-a4b96fa3d197',\n callback\n);\nThe first statement creates an LDA method object, while the second makes an actual question. I have not defined the callback variable,\nwhich actually is a JavaScript function that looks like:
\n\nvar callback = function(success, status, response){\n var result = searcher.parseResponse(response);\n document.getElementById(\"output\").innerHTML =\n \"Results: \" + JSON.stringify(result);\n};\nWhen the LDA web service returns data, this method gets called, providing asynchronous functionality to keep the web page responsive.\nBut when called, it first parses the returned data, and then puts the JSON output as text in the HTML. The output that is given in\nthe earlier screenshot.
\n\nSo, hurdle taken. From here on it’s easier. Regular looping over the results, creating some HTML output, etc. The\nfull source code if this example is available as Gist.
\n\n