1

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=wed@umbc.edu",
        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';
}
?>
Markus Proctor
  • 425
  • 1
  • 7
  • 27
  • 1
    Is that literally the JSON returned? Because JSON keys are supposed to be surrounded with `"`. – ajp15243 Jul 31 '14 at 15:38
  • 1
    That's not valid JSON. In JSON, property names must be quoted with double-quote characters. – Pointy Jul 31 '14 at 15:38
  • 2
    Is that *really* the JSON you get? You need to quote your keys with double quotes, *ALSO* you are missing commas! – gen_Eric Jul 31 '14 at 15:39
  • @RocketHazmat Didn't even notice the missing commas, nice catch. – ajp15243 Jul 31 '14 at 15:40
  • Also, that fiddle is blank. – Andy Jul 31 '14 at 15:42
  • 1
    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 Jul 31 '14 at 15:42
  • 1
    `type: "POST"` and `dataType: "JSONP"` are incompatible. You can't make a JSONP request using POST. – Quentin Jul 31 '14 at 15:43
  • 2
    BTW, if you're receiving a JSON or JSONP response, you don't need to call `$.parseJSON` in the success function. – Barmar Jul 31 '14 at 15:44
  • 1
    I don't understand how you could get the result of http://www.edupal.co/deals/?email=wed@umbc.edu and end up with what you added to your question...? – Andy Jul 31 '14 at 15:44
  • Does that server even serve JSONP? It doesn't look like it. Where are you getting the data from? – Andy Jul 31 '14 at 15:54
  • Sorry.... I just pasted the parsed response from the network tab. the actual text is actually a long string. Also, I've tried the "parseResponse(...)" method that you stated Barmar, but it didnt work either. – Markus Proctor Jul 31 '14 at 15:56
  • I know the json is correctly formatted because my browsers network tab of the devtools parses it just fine. That is why the above json was pasted the way i did. its actually a string which is created using json_encode() in php... so everything already has the quotes and commas etc. – Markus Proctor Jul 31 '14 at 15:59

2 Answers2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
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.

Community
  • 1
  • 1
Casey Falk
  • 2,617
  • 1
  • 18
  • 29