CODEWITHSUNDEEP
javascriptjqueryajaxjson
Markus Proctor
Markus Proctor

Reputation: 435

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

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';
}
?>

Upvotes: 1

Views: 173

Answers (2)

Casey Falk
Casey Falk

Reputation: 2667

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.

Upvotes: 1

Quentin
Quentin

Reputation: 943568

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.

Upvotes: 2

Related Questions