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.

Answer 1

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.