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, 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
LinkOut for Libraries Training and Educational Resources
UMLS Video Resources
NLM Catalog Quick Tours
VSAC Tutorials

Initial js and css libraries

<!--js + css-->


<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>

<link data-require="bootstrap-css" data-semver="4.5.0" rel="stylesheet" href="//" />
<link data-require="bootstrap@*" data-semver="4.5.0" rel="stylesheet" href="//" />
<link rel="stylesheet" href="//" />
<link href="//" rel="stylesheet" />
<link href="//" 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
     $.getJSON("", 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+='<td><a href = "'+resource.content+'" target = "blank">''</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) {


           content+=subjects.join(', ');



         // see for more information on using Data Tables
           $('table.resources').dataTable ({
          "ordering": true,
          "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.


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