javascript - Load remote JSON from Dynatable

Question

Update: to avoid the possibility that the problem comes solely down to the same origin policy, I've tried serving this locally where all assets are coming from http://localhost:4000 using Serve. It didn't solve the problem. So editing the fiddle might not work because of the same origin policy, but you can see the code there.

---

I'm trying to use Dynatable to load external JSON, skipping the read/normalize step (which generates the JSON from an existing table). This is supposed to be supported, but it's not working for me.

Here's my attempt on JSFiddle. Loading JSON from within the document (which doesn't seem terribly useful to me) is working perfectly, as seen in the fiddle. But pulling it in from a URL is not working at all.

Here's my 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: []
        }
    });
});

...which refers to two tables, one with an id of "local" and another with an id of "remote", and to a script containing data for the local table:

<h3>Remote JSON: Failing</h3>
<table class="table table-striped" id="remote">
  <thead>
    <th>Some Attribute</th>
    <th>Some Other Attribute</th>
  </thead>
  <tbody>
  </tbody>
</table>
<hr>
<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>

Answer 1

The reason the remote isn't working is because when fetching data via AJAX, the response JSON must have some meta-data included with it along with the actual records.

If you look at the AJAX example in the dynatable docs, you can click "View AJAX Data" to see what the format looks like:

{
  "records": [
    {
      "someAttribute": "I am record one",
      "someOtherAttribute": "Fetched by AJAX"
    },
    {
      "someAttribute": "I am record two",
      "someOtherAttribute": "Cuz it's awesome"
    },
    {
      "someAttribute": "I am record three",
      "someOtherAttribute": "Yup, still AJAX"
    }
  ],
  "queryRecordCount": 3,
  "totalRecordCount": 3
}

You can see the actual results array is nested under "records" in the response JSON, and it also returns how many records are total in the set, as well as how many are in the current set.

The reason this meta-data is needed by dynatable is in order to do the pagination and the record-count text at the bottom of the table. Since your server is doing the actual querying, sorting, and paginating (e.g. via a database query or other server-side processing), dynatable only sees the final result. Therefore, dynatable wouldn't ever know:

1. how many total records are in the set vs.

2. how many records are in the filtered/queried set (across all pages) vs.

3. how many records are in the filtered/queried paginated set (on the current page).

The only thing dynatable could infer from the returned results is (3) from above, i.e. how many records are in the filtered/queried set on the current page. So, it needs the returned JSON from the server to tell it (1), which is the totalRecordCount, and (2), which is the queryRecordCount.

Of course, if you don't want all of that, you can just turn off pagination and the record-count text, and tell dynatable that the results will be located at the root of the JSON returned by the server:

$('#remote').dynatable({
  features: {
    paginate: false,
    recordCount: false
  },
  dataset: {
    ajax: true,
    ajaxOnLoad: true,
    ajaxUrl: '//www.dynatable.com/dynatable-ajax.json',
    records: []
  },
  params: {
    records: '_root'
  }
});