Why does jsonp return "Unexpected Token :" when using $.ajax() when my json is properly formated?

Question

I'm using the below code to grab json from a remote address and use it's information in my project as a javascript object.

        $.ajax({
        type: "POST",
        dataType: "JSONP",
        url: "http://www.edupal.co/deals/[email protected]",
        jsonCallback: 'parseResponse',
        success: function( data ){
            console.log($.parseJSON(data));
        },
        error: function( xhr, str, e ){
            console.log( "There was an error with the request", str, e );
        },
        complete: function(){
            console.log("The request has completed.... finally.");
        }

});

The problem is that although the request is being made just fine (I can see it in my networks tab in dev tools), it is telling me in my javascript console that there is an "Unexpected Token : "

Here is the JSON that is returning:

{"0":"1","id":"1","1":"20% Off UMBC Hoodies","title":"20% Off UMBC Hoodies","2":"umbc","school":"umbc","3":"UMBC Bookstore","location":"UMBC Bookstore","4":"http:\/\/bookstore.umbc.edu\/StoreImages\/9-862269-1.jpg","picture":"http:\/\/bookstore.umbc.edu\/StoreImages\/9-862269-1.jpg","5":"Limit 1 per person. Must present EduPal app with deal to cashier to be awarded discount.","description":"Limit 1 per person. Must present EduPal app with deal to cashier to be awarded discount.","6":"http:\/\/www.globatum.com","link":"http:\/\/www.globatum.com","7":"7\/30\/2014,08:45","start":"7\/30\/2014,08:45","8":"7\/30\/2014,09:45","end":"7\/30\/2014,09:45","9":"active","status":"active","10":"0","clicks":"0","11":"2014-07-30 20:18:30","posted":"2014-07-30 20:18:30"}

So i'm confused at what the problem could be. Can anyone help? I put it all in jsfiddle if anyone wants to test it. http://jsfiddle.net/#&togetherjs=T0ztQQbitP

Here is the PHP that generates the JSON

<?php
include('../dbconnect.php');
header('Content-Type: application/json');
$email = $_GET['email'];
$email = substr($email, 0, strpos($email, ".edu"));
$email = strstr($email, '@');
$school = str_replace('@', '', $email);

$sql = "SELECT * FROM `ads` WHERE `school` = '$school' ORDER BY `posted` DESC";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
if($count > 0){
$deals = array();
$deals = mysql_fetch_array($result);

echo json_encode($deals) ;
}
else{

    echo 'No records';
}
?>

Is that literally the JSON returned? Because JSON keys are supposed to be surrounded with ". — ajp15243
– ajp15243, Commented Jul 31, 2014 at 15:38
That's not valid JSON. In JSON, property names must be quoted with double-quote characters. — Pointy
– Pointy, Commented Jul 31, 2014 at 15:38
Is that really the JSON you get? You need to quote your keys with double quotes, ALSO you are missing commas! — gen_Eric
– gen_Eric, Commented Jul 31, 2014 at 15:39
In addition to the problems with the JSON syntax, JSONP requires that it be wrapped in a call to the callback function. So it should be parseResponse(... JSON ...); — Barmar
– Barmar, Commented Jul 31, 2014 at 15:42
BTW, if you're receiving a JSON or JSONP response, you don't need to call $.parseJSON in the success function. — Barmar
– Barmar, Commented Jul 31, 2014 at 15:44

Quentin · Accepted Answer · 2014-07-31 15:48:06Z

2

It is not properly formatted.

JSONP must be a JavaScript program consisting of a single function call (to a function specified in the query string (usually via a callback parameter) which passes one argument (usually an object or array literal).

Your quoted response consists of a JavaScript object literal. Since the property names are identifiers instead of strings, it isn't even JSON. Since you are missing , between key:value pairs, it isn't even valid JavaScript.

The actual response I get (it looks like you are copy/pasting from the Chrome visualisation of the JSON instead of the source code) when I hit that URL is JSON — but not JSONP. So you shouldn't tell jQuery to process it as JSONP.

Since the URL doesn't appear to give permission via CORS, there doesn't appear to be any way to hit it directly with client side JavaScript unless you are hosting your HTML on www.edual.co so you'll need to use some server side code to relay the data to your JS.

edited Jul 31, 2014 at 15:48

answered Jul 31, 2014 at 15:42

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Markus Proctor Over a year ago

I have included the PHP that returns the JSON. Any tips as to what to include in the PHP file to relay the data to my JS?

Community · Accepted Answer · 2017-05-23 12:11:39Z

1

JSON requires double-quotes around keys and commas for all but the last item.

...
clicks: "0"
...

should be...

...
"clicks": "0",
...

Note: even integer "keys" need to have double-quotes. So 0: "..." should be "0":"..."

Check out JSONLint in the future to double-check your JSON.

Also, JSON is not JSONP (source). You specify dataType: "JSONP", but you may just want dataType: "json". If so, as Barmar mentioned, you don't need to call $.parseJSON at all since data will already be a JSON object.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jul 31, 2014 at 15:38

Casey Falk

2,6771 gold badge21 silver badges31 bronze badges

1 Comment

gen_Eric Over a year ago

Also, you're missing commas.

Collectives™ on Stack Overflow

Why does jsonp return "Unexpected Token :" when using $.ajax() when my json is properly formated?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related