ajax calls fails with error "Unexpected token"

Question

I have a php application that makes an ajax call and retrieves the following data from my database:

{
    "5717a3873747106e60a087ec": {
        "_id": {
            "$id": "5717a3873747106e60a087ec"
        },
        "phone": "18455100020",
        "fax": false,
        "emergency": false,
        "site": "ABC",
        "sip_uri": "",
        "associated_users": [],
        "location": "New Zealand",
        "reservation": [{
            "reserved": true,
            "reserved_for": "COO12"
        }],
        "available": true
    }
}

This is the code that I have to make the ajax call:

   $(document).ready(function(){
                var request = BASEPATH + 'index.php/export/get_widget/available';
                console.log(request);
                $.ajax({
                          url:request,
                          type:'GET',
                          dataType:'jsonp',
                          success: function(returnDataFromController) {
                                  if (returnDataFromController.status)
                                  { 
                                        console.log(returnDataFromController); 
                                        //build table contents 
                                  }
                          },// end success
                          error:  function(jqXHR, textStatus, errorThrown)
                          {
                                  console.log(errorThrown);
                          }
                });//end ajax.
        }); //end document ready

When I check the console, I see that the request failed with the following error message:

Uncaught SyntaxError: Unexpected token :

It's basically dying when it sees the first ":" after the mongo doc id "5717a3873747106e60a087ec"

What I've tried:

I've validated the return data in jsonlint and it looks like the data is valid json.

I'm not sure what else to check. I'm playing around with jsonp vs json for the data type of my ajax call. But other than that, I'm out of ideas.

Any suggestions?

EDIT 1

I should also say that I found this post: jQuery.ajax() call is returning JSON.parse unexpected character error

but i don't know how to edit the json headers. I'm currently also playing around with the code to see how to do this

EDIT 2:

When I change jsonp to json, I get another error message :

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

The variable "request" contains something like this:

http://10.1.1.1/mytestapp/index.php/export/get_widgets/available

I thought the problem was that the above mentioned URL is being compared with the "http://localhost/mytestapp" URL that i used to launch the application. So tried to launch my web app like this instead:

http://10.1.1.1/mytestapp/index.php/

but it still fails with the same error.

you're requesting jsonp. that means what you're getting back MUST look like a JS function call, e.g. somecallback("json data here"). if you're getting back just the json data itself, with no function call wrapper, then it's not jsonp. — Marc B
– Marc B, Commented Apr 20, 2016 at 20:27
Also note that there is no status key in the returned json, but that will be the next error after you fix the data type. — jeroen
– jeroen, Commented Apr 20, 2016 at 20:27
Do you need the complete url? If it is all on the same server, you can use /mytestapp/... . — jeroen
– jeroen, Commented Apr 20, 2016 at 20:42

Happydevdays · Accepted Answer · 2016-04-21 12:02:42Z

So the root cause of my problem was the json vs jsonp. I changed the data type in my ajax call to json. And then instead of passing the full URL in the call, I just passed the application name like this:

            var request = '/testapp/index.php/export/get_widgets/available';
154                 console.log(request);
155                 $.ajax({
156                           url:request,
157                           type:'GET',
158                           dataType:'json',
159                           success: function(returnDataFromController) {
160                                   if (returnDataFromController)
161                                   { 
162                                         console.log(returnDataFromController);
163                                         console.log(returnDataFromController.id); 
164                                         //build table contents 
165                                   }
166                           },// end success
167                           error:  function(jqXHR, textStatus, errorThrown)
168                           {
169                                   console.log(errorThrown);
170                           }
171                 });//end ajax.

Collectives™ on Stack Overflow

ajax calls fails with error "Unexpected token"

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related