'Uncaught SyntaxError: Unexpected token :' when parsing valid JSON

Question

I'm parsing JSON data from an external url but failing to use the data because of an 'Uncaught SyntaxError: Unexpected token :' syntax error. I checked the JSON on JSONLint and it validated okay so I don't know what I could be doing wrong.

I'm getting it from this URL:

http://clipped.me/algorithm/clippedapi.php?url=http://www.bbc.com/news/world-asia-china-30067035&callback=?

Parsing it like so:

$.getJSON("http://clipped.me/algorithm/clippedapi.php?url=http://www.bbc.com/news/world-asia-china-30067035&callback=?", function(data) {
    var story = data.summary[0];
    console.log(story);
    $('p').html(story)
});

And the data received is this:

{
    "title": "BBC News - Hong Kong protest leaders denied Beijing flight",
    "summary": [
        "They had hoped to meet China's leaders as part of their push for greater democracy, but were told at the airport that their travel permits were invalid.",
        "They want Beijing to allow more candidates to stand in the territory's next leadership election in 2017.",
        "The group were greeted at the airport by fellow democracy activists, who unfurled yellow umbrellas - a symbol of Hong Kong's democracy movement."
    ],
    "source": "bbc.com"
}

Here is a JSFIDDLE example.

Since people here don't seem to like your question and keep downvoting without any comments, feel free to post your question in our StackOverflow chat room for genuine help. http://chat.stackoverflow.com/rooms/65162/javascript-jquery-html-and-css — Howard Renollet, Nov 18 '14 at 18:23
You're trying to use that JSON response as if it were a response intended for JSONP. You can't directly fetch JSON from a different domain unless the server is properly configured. — Pointy, Nov 18 '14 at 18:25
I'm not sure `$.getJSON()` will be able to figure out to do a straight fetch without trying JSONP even if the server has CORS headers. If you don't control the server that doesn't matter of course. In that case you have to fetch the JSON from server-side code. — Pointy, Nov 18 '14 at 18:28
You don't need to parse from a `$.getJSON` to access its contents — Xenyal, Nov 18 '14 at 18:29
I'm kinda with Howard on this, this doesn't feel like it should have been downvoted. Maybe the downvotes were before P&P edited the orig question. I think this question is worthy of SO, because it is reasonable to assume an API returning JSON might be usable from JS, when in fact it turns out that it isn't. Definitely confusing, has caused similar issues elsewhere on SO, and so it's likely this discussion will help others. I'll counter the downvotes with an upvote. — sifriday, Nov 18 '14 at 19:56

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

It looks like clipped.me is ignoring your callback and simply dumping raw JSON into the DOM instead of a properly-formatted JSONP callback. When that fails it generates the syntax error message. Their API doesn't support cross-origin, either. It looks like it is designed to be consumed from server-side code only, not client-side JS.

See also here - $.getJSON parsererror trying to call API

edited May 23 '17 at 11:49

Community

1
1

answered Nov 18 '14 at 18:42

sifriday

4,342
1
13
24

Ah, okay! Thanks for clarifying! I guess there's no workaround I can implement on my side is there? – babusi Nov 18 '14 at 19:17
Have you got PHP? If you have you can write a really simple Curl proxy so you can still use it from JS. Your JS would call into a PHP script on the same domain which would use Curl to call clipped.me and return the JSON to your proxy which would return it to your JS. – sifriday Nov 18 '14 at 19:53
Dude you're a legend! I was just about to do a bunch of research into reverse proxies. Thanks! – babusi Nov 18 '14 at 20:03

'Uncaught SyntaxError: Unexpected token :' when parsing valid JSON

1 Answers1