Table of Contents

Job application at medicalvalues

Notes

My Questions

My Answers

Code challenge

Fiddle : https://jsfiddle.net/avx0284y/

Video : https://medicalvalues.de/wp-content/uploads/js_challenge.mp4

JSON data: https://raw.githubusercontent.com/NCI-CBIIT/FHH/master/data/diseases.json

For test use : https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write 

<form class="search-form">
  <input id="userInput" type="text" class="search" onInput="processUserInput()" placeholder="Disease or Code">
  <ul id="suggestionsList" class="suggestions">
    <li>Filter for a disease or code</li>
  </ul>
</form>
 
 
<p class="info">Using JavaScript, replicate the <a href="https://medicalvalues.de/wp-content/uploads/2021/01/js_challenge.mp4" target="_blank">functionality found here</a>. <br> The solution does not have to be perfect. Most important is to see how you approach such tasks.</p>
// Fetch the data from this url and create a typeahead to filter by disease name or code
 
// each disease should be a <li> in the suggestions <ul>
 
// there is a span class of `hl` to highlight matches
 
// Demo: https://medicalvalues.de/wp-content/uploads/2021/01/js_challenge.mp4
 
// You are free to use additional libraries or frameworks, please just do not copy the whole code from somwhere else
 
// Once you are done, save this fiddle and send us the url
 
const url = 'https://raw.githubusercontent.com/NCI-CBIIT/FHH/master/data/diseases.json';
var jsonObject = null;
 
fetch(url).then(r => r.json())
  .then(data => jsonObject=data)
  .catch(e => alert("Can't fetch JSON"))
 
 
function findProposals(inputValue) {
  var foundProposals = [];
  for(var i=0; i < Object.values(jsonObject).length; i++) {
    for(var j=0; j < Object.values(jsonObject)[i].length; j++) {
      var current = Object.values(jsonObject)[i][j];
      if(current.name.includes(inputValue) || current.code.includes(inputValue)) {
        foundProposals.push(current);
      }
    }
  }
  return foundProposals;
}
 
 
function displayProposal(ul, proposal) {
    var li = document.createElement("li");
    li.innerHTML = proposal.name + "<span class='abbr'>" + proposal.abbr +"</span>";
    ul.appendChild(li);
}
 
 
function emptySuggestionsList(ul) {
  while(ul.firstChild ){
    ul.removeChild( ul.firstChild );
  }
}
 
function processUserInput() {
  var inputField = document.getElementById("userInput");
  var inputValue = inputField.value;
  var ul = document.getElementById("suggestionsList");
 
  emptySuggestionsList(ul);
 
  if(inputValue!="") {
    var arrayOfProposals = findProposals(inputValue)
    if(arrayOfProposals!=null) {
      for (var i = 0; i < arrayOfProposals.length; i++) {
        displayProposal(ul, arrayOfProposals[i])
      }    
    }
  }
 
}