Uncaught SyntaxError: Unexpected token, not jsonp ¿but reading json?

Question

im new on AJAX and javascript and i'm trying to do and join them with an api with this structure on

http://localhost:8088/JobPositionForDd:

{
    "data": [{
        "_id": "529dc2dfd0bf07a41b000048",
        "name": "Junior Android"
    }, {
        "_id": "529dc30bd0bf07a41b00004a",
        "name": "Junior iOS"
    }]
}

and working my main.js like this.

$(function() {
    var $JobPositionForDd = $('#JobPositionForDd');
    $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        url: 'http://localhost:8088/JobPositionForDd',
        success: function(JobPositionForDd) {
            console.log('success', JobPositionForDd);
        }
    });
});

and my index like this:

<!DOCTYPE html>
<html>
   <head>
      <title> Api Calls</title>
      <link rel='stylesheet' href='style.css'/>
   </head>
   <body>
      <h1> Api calls</h1>
      <h2> Job Positions</h2>
      <ul id="data"> </ul>
      <script src="jquery.js"></script>
      <script src="main.js"></script> 
   </body>
</html>

I've read a lot of other posts, and some answers said i have to take off the jsonp of the datatype, but if I do so I'll get an error of "No 'Access-Control-Allow-Origin' header is present on the requested resource" because i'm working on another port 8083, so, on the inspect element of chrome, gives me the error

"Uncaught SyntaxError: Unexpected token : JobPositionForDd?callback=jQuery17109280039484146982_1445751566525&_=1445751566537:2" and sends me to " "data": [ " of the json!

i don't know why it doesn't work or at least 'connect' successful, i think it's so basic what i'm doing but still is wrong, i'll be glad if someone could help me please ):

score 3 · Answer 1 · edited May 23 '17 at 11:59

...Unexpected token, not jsonp ¿but reading json?

JSON and JSONP are different things. Related, but different.

Here's a short example of JSON:

{"name":"value"}

Here's a short example of JSONP:

someFunctionName({"name":"value"})

JSON is a textual notation for data exchange. JSONP is a means of transferring JSON that gets around the Same Origin Protocol limitation of ajax. Basically, it's JSON wrapped in a function call, which you access by adding a script element to the page instead of with ajax. The browser downloads and runs the "script," and your function gets called with the data.

So the first thing to determine is whether you want to be using JSON or JSONP.

If you want to use JSON...

...then because of the Same Origin Policy, you do indeed need to send additional headers from the server to enable Cross-Origin Resource Sharing. it's not just Access-Control-Allow-Origin, there's more to it. This answer has pseudo-code for the server side of enabling CORS. THen you'd use the dataType 'json' (or better yet, ensure your server is returning the correct Content-Type header, which is application/json, and then leave dataType off entirely).

If you want to use JSONP...

...then your server side needs to look for a callback query string parameter and, in your reply, use the value of that parameter as the name of the function in the JSONP reply. E.g., if you get

/some/api/path?callback=blarg

your reply should be

blarg({"name":"value"})

The Content-Type of the response should be application/javascript because what you're sending back is, technically, JavaScript.

I would like to use JSON, i'm on Wamp so, on the httpd.conf i added " Header set Access-Control-Allow-Origin: * " at the end, and changed the datatype to json, but i get the error "No 'Access-Control-Allow-Origin' header is present on the requested resource.", — Sparkle, Oct 26 '15 at 01:04
@Sparkle: As I said: *"it's not just Access-Control-Allow-Origin, there's more to it"*. — T.J. Crowder, Oct 26 '15 at 01:14

Uncaught SyntaxError: Unexpected token, not jsonp ¿but reading json?

1 Answers1

If you want to use JSON...

If you want to use JSONP...