Learning Resources Database

The NLM Learning Resources API returns JSON. The following sample code uses jQuery to demonstrate how you can parse the JSON and display it as HTML for your web pages.
Here we parse the output of a call to https://learn.nlm.nih.gov/rest/search/?subjects=S019080, which retrieves resources tagged with the ‘PubMed’ subject area.
More samples will be published in the future.

NLM Pages Utilitzing the API

Page	URL
MeSH Tutorials and Webinars	https://www.nlm.nih.gov/bsd/disted/mesh.html
LinkOut for Libraries Training and Educational Resources	https://www.nlm.nih.gov/bsd/disted/linkout_for_libraries/loforlib.html
UMLS Video Resources	https://www.nlm.nih.gov/research/umls/user_education/learning_resources.html
NLM Catalog Quick Tours	https://www.nlm.nih.gov/bsd/disted/catalog.html
VSAC Tutorials	https://www.nlm.nih.gov/vsac/support/videotutorials/videotutorials.html

Initial js and css libraries

<!--js + css-->

<script
    type="text/javascript"
    src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>


<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.min.js"></script>

<link data-require="bootstrap-css" data-semver="4.5.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="4.5.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<link href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css" rel="stylesheet" />
<link href="//cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css" rel="stylesheet" />

jQuery that makes call to the API and parses the output into a table

<script type = "text/javascript">
var $ = jQuery.noConflict();

$(document).ready(function() {

     //modify this URL with subjects of interest to you.  This example retrieves everything with the subject of "PubMed"
     //The full list of subjects is available at https://learn.nlm.nih.gov/rest/subjects/all/
     $.getJSON("https://learn.nlm.nih.gov/rest/search/?subjects=S019080", function(data) {
          var content = '';

          content+='<table class = "resources row-border hover"><thead><tr><th>Name</th><th>Content Type</th><th>Runtime (min.)</th><th>Date Created</th><th>Subject(s)</th></tr></thead><tbody>';

          $.each(data.learningResources, function(i, resource) {

           var subjects = [];
           var date = new Date(resource.dateCreated);
           //date.getMonth() in js starts with 0 for January, so you have to add 1.
           var month = pad(date.getMonth() +1,2);
           var day = pad(date.getDate(),2);
           var dateString = date.getFullYear() + "-" + month + "-" + day;

           content+='<tr>';
	   content+='<td><a href = "'+resource.content+'" target = "blank">'+resource.name+'</a><br/>'+resource.description+'</td><td>'+resource.format.type+'</td><td>'+resource.runTime+'</td> <td>'+dateString+'</td><td>';

                   //many resources are tagged with more than one subject, so we store them and join them.
                   $.each(this.subjects,function(i,subject) {
                    subjects.push(subject.name);

                     });

           content+=subjects.join(', ');
           content+='</td>'
           content+='</tr>';

          });
          content+='</tbody></table>';

    $(content).appendTo('#learning-resources');

         // see https://www.datatables.net for more information on using Data Tables
           $('table.resources').dataTable ({
          "ordering": true,
          "order":[[3,"desc"]],
          "searching": true,
          "responsive": true,
          "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]

          }); //end data tables

     });

});

//handle zero padding for months, days that are single digits
function pad(num, size) {

    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

Create a placeholder div within the body. This holds our tabular view of the data.

<body>

<div id = "learning-resources">
<!-- place holder div.  Our jQuery function appends content into here -->
</div>
</body>