Loading JSON from local dynatable

Question

I'm trying to do something very similar to the last comment of this question - that is to load a whole bunch of data in an ajax call but then put it into dynatable as though it's a local JSON file. I am none to proficient at javascript/jquery, so it's probably something fairly obvious, but I can't get it to work. My current code looks like this:

<table id="my-ajax-table">
  <thead>
    <th>Some Attribute</th>
    <th>Some Other Attribute</th>
  </thead>
  <tbody>
  </tbody>
</table>

<script>

$.getJSON('/dynatable-ajax.json', function(data) {
      $('#my-ajax-table').dynatable({
      dataset: {
        records: data
      });
    });

and the ajax url returns this:

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

Which is right out of the tutorial.

I'm assuming it's my $.getJSON that's wrong. Should I be using a success and failure case? What would that look like? Should I be using parseJSON?

Thanks a lot, Alex

You have a syntax error -- `{ records: data; }`. Remove the semicolon after `data`, as they're not expected directly inside `Object` literals. — Jonathan Lonowski, Apr 09 '14 at 22:25
Thanks, fixed above. It still doesn't seem to work though - no data is loaded into the table. — Alex S, Apr 09 '14 at 22:41

score 1 · Accepted Answer · answered Jun 03 '14 at 21:43

In the end I changed the javascript to this and it worked:

<script>
$.getJSON('/dynatable-ajax.json', function (response) {     
  $('#my-table').dynatable({
  dataset: {
    records: response
  },
});

});
</script>

Not entirely sure what was wrong with the first version, I think there are too many bracket closes or something.

score 0 · Answer 2 · answered Mar 26 '15 at 12:43

For really quick things like taht its helpful to use a site called http://www.dirtymarkup.com

Paste your code in and click on each bracket, it then highlights the corresponding closing bracket.

http://jsbeautifier.org/ is another good site for adding indentation to see your code more clearly and http://www.javascriptlint.com/ for errors.

Loading JSON from local dynatable

2 Answers2