Uncaught SyntaxError: Unexpected token :

08elf

Hi,

I'm a hobbiest programmer and just getting stuck using datatables to work when trying to load data through ajax with an "Uncaught SyntaxError: Unexpected token :" being returned. I can load the exact same data source from another destination and it works, so I'm not sure what's going wrong as only the source URL changes retrieves from.

Any assistance appreciated.

HTML
        <div id="my-team-heading">My Team</div>
        <table id="datatable-team" class="table">
        </table>

Javascript
$(function () {
    var teamtable = $('#datatable-team').DataTable( {
        "ajax": {
            url: "https://us-central1-adamfkltest.cloudfunctions.net/getTeamData",
            dataType: "jsonp",
            dataSrc: "values"
        }
    } );
} );

JSON
{
   "range":"Sheet1!A1:AU36",
   "majorDimension":"ROWS",
   "values":[
      [
         "12 weeks",
         "HAW",
         "Grant Birchall",
         "D",
         "68.8",
         "69",
         "84",
         "",
         "",
         "",
         "",
         "19",
         "",
         "",
         "",
         "",
         "",
         "",
         "95",
         "77",
         "",
         "",
         "",
         "",
         "",
         "",
         "",
         "",
         "14",
         "253",
         "30",
         "28/01/1988",
         "193cm",
         "89kg",
         "Devonport",
         "Defender",
         "DEF",
         "8"
      ]
   ]
}

allan

There doesn't appear to be any syntax errors in your code there, so it must be getting triggered from somewhere else in the code (or buried down in what that is calling). Can you link to a page showing the issue please?

Note, you'll need to define your columns somewhere - either in the HTML or using columns.

Thanks,
Allan

kthorngren

I think the problem may be with the JSON response data. In your browser go to the URL then in Dev Tools > Network look at the Response tab. You will find four records with \n in the middle of the data. For example: "Midfield\nForward". This is fine for JSON but not Javascript. Take a look at this article:
http://timelessrepo.com/json-isnt-a-javascript-subset

Kevin

08elf

@Allan I've got all the other code in there, just removed it for this example, but if it's helpful to have it all I can put it in. URL is adamfkltest.firebaseapp.com

@kthorngren - I've modified the data and only have 1 row of data now, which removes the "/" from the dataset but the issue still persists.

I've been digging around on googles tools and found this:
https://search.google.com/structured-data/testing-tool#

Basically when I use my direct url with api key, it returns nicely but when I use the firebase function end point it's a single line (I've attached a file to show the compare).

I suspect it's the new end point data source and maybe some of my nodejs code that isn't making the data available as it's expected, rather than anything wrong with datables.

EDIT: I've updated my nodeJS code and both are now returning with the same structure using the google tool above, but still returning the same syntax error.

{
  "values": [
    [
      "12 weeks",
      "HAW",
      "Grant Birchall",
      "D",
      "68.8",
      "69"
    ]
  ]
}

kthorngren

suspect it's the new end point data source and maybe some of my nodejs code that isn't making the data available as it's expected, rather than anything wrong with datables.

I agree. Using a jQuery AJAX call outside DT results in the same:

$.ajax({
  url: "https://us-central1-adamfkltest.cloudfunctions.net/getTeamData",
  dataType: "jsonp",
  success: function(data) {
    console.log(data);
  }
});

Kevin

08elf

I finally got past this issue and can confirm it was the server code that was causing the issue. For some reason the call from google cloud was wrapping my response in html and that was causing the SyntaxError to occur.

In case anyone else comes looking, I updated my firebase code to run the function through the rewrites configuration found here: https://firebase.google.com/docs/hosting/functions#direct_hosting_requests_to_your_function

This then plugged seamlessly into Datatables using ajax.