JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css">
<h3>Local JSON: Succeeding</h3>
<table class="table table-striped" id="local">
  <thead>
    <th style="color: black;">Band</th>
    <th>Album</th>
  </thead>
  <tbody>
  </tbody>
</table>
<script id="music">
[
  {
    "band": "The Police",
    "album": "Ghost In The Machine"
  },{
    "band": "Supertramp",
    "album": "Breakfast In America"
  },{
    "band": "Peter Tosh",
    "album": "Mama Africa"
  },{
    "band": "The Police",
    "album": "Regatta d'Blanc"
  },{
    "band": "The Police",
    "album": "Zenyatta Mondatta"
  },{
    "band": "Supertramp",
    "album": "Crime of the Century"
  },{
    "band": "Talking Heads",
    "album": "Remain in Light"
  },{
    "band": "Talking Heads",
    "album": "Speaking in Tongues"
  }
]
</script>

JavaScript

// getting JSON from the document works, but of what use is that?
  $(document).ready( function() {
    $('#local').dynatable({
      dataset: {
        records: JSON.parse($('#music').text())
      }
    });

    // getting JSON from a remote source fails:
    $('#remote').dynatable({
      dataset: {
        ajax: true,
        ajaxOnLoad: true,
        ajaxUrl: '//www.dynatable.com/dynatable-ajax.json',
        records: []
      }
    });
  });