# Microsoft Academic


The raw request for <input id="nameInput" value="Jens Lincke"></input> <button id="inspect">inspect</button>

We use here the Microsoft Acadmic API, which requires a key that you can get here <https://labs.cognitive.microsoft.com/en-us/project-academic-knowledge>). The key will be asked of you when needed and stored in your local browser storage. 

<script>
import Academic from "./academic.js"

var academic = new Academic();

var json, rawTable, mappedTable;

var input = lively.query(this, "#nameInput");

lively.query(this, "#inspect").addEventListener("click", () => {
  lively.openInspector(json)
})


var updateTables = async function() {
  var name = input.value
  lively.notify("update " + name)
  rawTable.setFromJSO([])
  mappedTable.setFromJSO([])
  
  var json = await academic.queryAuthor(name)
  rawTable.setFromJSO(json.entities.slice(0,10))

  mappedTable.setFromJSO(json.entities.map(ea => ({
    authors: ea.AA && ea.AA.slice(0,3).map(eaAuthor => eaAuthor.DAuN).join("; ") + (ea.AA.length > 3 ? " et al." : ""),
    year: ea.Y,
    title: ea.Ti,
  })))
}

lively.addEventListener("input", input, "keyup", evt => {
  if (evt.keyCode == 13) { // ENTER
    updateTables()  
  }
});

;(async () => {
  rawTable = await lively.create("lively-table", this)
  mappedTable = await lively.create("lively-table", this)
  await updateTables()  
  // mappedTable.setFromJSO([{hello: "world"},{hello: "foo2"}])
  
  var div = document.createElement("div")
  var tableHeading = document.createElement("h2")
  tableHeading.textContent = "Raw Table"
  div.appendChild(tableHeading)
  div.appendChild(rawTable)

  var tableHeading2 = document.createElement("h2")
  tableHeading2.textContent =  "Mappped Table"
  div.appendChild(tableHeading2)

  div.appendChild(mappedTable)
  return  div
  // #BUG updates only after every second change... weird  #Stefan  Any Ideas?
  return await (<div><h2>raw</h2>{rawTable}<h2>and mapped</h2>{mappedTable}</div>)
})()
</script>