FHIR Sample App

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="jqFhir@0.0.5" data-semver="0.0.5" src="https://cdn.rawgit.com/FHIR/fhir.js/v0.0.5/dist/jqFhir.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <title>Sample FHIR App</title>
</head>

<body>
  <h1>  Hello  <span id="patient_name">...</span>! </h1>
  <ul id="med_list"></ul>
  <script>
  
    // Set up a client and patient ID to talk to an un-authenticated FHIR server
    var client = jqFhir({ baseUrl: 'https://fhir-open-api.smartplatforms.org' }),
        patientId = '1137192';

    client.read({
      id: 'Patient/' + patientId
    }).then(function(p) {
      var name = p.content.name[0];
      var formatted = name.given.join(" ") + " " + name.family;
      $("#patient_name").text(formatted);
    });

    client.search({
      type: 'MedicationPrescription',
      graph: true, // tie in the included resources by following references
                   // automatically to form an in-memory graph -- so we don't 
                   // have to resolve references one by one.
      query: {
        patient: {
          $type: 'Patient',
          _id: patientId
        },
        $include: {
          MedicationPrescription: ['medication']
        }
      }}).then(function(prescriptions) {
        prescriptions.forEach(function(rx) {
          var med = rx.medication;
          var row = $("<li> " + med.name + "</li>");
          $("#med_list").append(row);
      });
    });
  </script>
</body>
</html>