I'm trying to use Envato API to gather some user stats w/ jQuery. I'll show an example response JSON:

{
"new-files-from-user":[
    {
    "thumbnail":".jpg",
    "tags":"",
    "user":"collis",
    "url":"",
    "live_preview_url":".__large_preview.jpg",
    "uploaded_on":"Wed Dec 03 03:32:35 +1100 2008",
    "cost":"10.00",
    "item":"Manilla Photoshop Design",
    "sales":"294",
    "rating":"4",
    "id":"22803"
    },
    {
    "thumbnail":".jpg",
    "tags":"clean",
    "user":"collis",
    "url":"",
    "live_preview_url":".__large_preview.jpg",
    "uploaded_on":"Tue Dec 02 04:01:12 +1100 2008",
    "cost":"8.00","item":"Black + White Simple Theme",
    "sales":"272","
    rating":"4",
    "id":"22705"
    },
    {
    "thumbnail":".jpg",
    "tags":"clean",
    "user":"collis",
    "url":"",
    "live_preview_url":".__large_preview.jpg",
    "uploaded_on":"Fri Sep 05 07:30:24 +1000 2008","cost":"12.00",
    "item":"Quik v1 Admin Skin",
    "sales":"336",
    "rating":"5",
    "id":"17314"
    },
    {"thumbnail":".jpg",
    "tags":"clean",
    "user":"collis",
    "url":"",
    "live_preview_url":".__large_preview.jpg",
    "uploaded_on":"Tue Sep 09 06:10:50 +1000 2008",
    "cost":"20.00",
    "item":"FreshCorp - Business Template",
    "sales":"277",
    "rating":"4","id":"17528"
    },
    {"thumbnail":".jpg",
    "tags":"clean",
    "user":"collis",
    "url":"",
    "live_preview_url":".__large_preview.jpg",
    "uploaded_on":"Fri Sep 12 14:22:45 +1000 2008",
    "cost":"20.00","item":"Real Estate HTML Template",
    "sales":"175",
    "rating":"4",
    "id":"17732"
    }
]
}

Here's my script:

<script type="text/javascript">
//this gets JSON data from an url
$.getJSON(":collins,themeforest.json?callback=?",
//this function gets called when data has been recieved
function(data){
    //parsing JSON data, line by line(like foreach)
    $.each(data['new-items-from-user'], function(i,item){
        //puts all titles in our div
        $("#test").append(item.item+"<br />");
    });
});
</script>
<div id="test"></div>

And here's what I get in the Chrome console: 'Uncaught SyntaxError: Unexpected Token :' (pic ).

I'm not sure if I have an error in my code that's causing this problem, but here's a fiddle to see the result: /

Thanks, Matt

I'm trying to use Envato API to gather some user stats w/ jQuery. I'll show an example response JSON:

{
"new-files-from-user":[
    {
    "thumbnail":"http://3.s3.envato./files/60560.jpg",
    "tags":"",
    "user":"collis",
    "url":"http://themeforest/item/manilla-photoshop-design/22803",
    "live_preview_url":"http://2.s3.envato./files/60561/1_Home.__large_preview.jpg",
    "uploaded_on":"Wed Dec 03 03:32:35 +1100 2008",
    "cost":"10.00",
    "item":"Manilla Photoshop Design",
    "sales":"294",
    "rating":"4",
    "id":"22803"
    },
    {
    "thumbnail":"http://2.s3.envato./files/60223.jpg",
    "tags":"clean",
    "user":"collis",
    "url":"http://themeforest/item/black-white-simple-theme/22705",
    "live_preview_url":"http://0.s3.envato./files/60224/1_home.__large_preview.jpg",
    "uploaded_on":"Tue Dec 02 04:01:12 +1100 2008",
    "cost":"8.00","item":"Black + White Simple Theme",
    "sales":"272","
    rating":"4",
    "id":"22705"
    },
    {
    "thumbnail":"http://1.s3.envato./files/44556.jpg",
    "tags":"clean",
    "user":"collis",
    "url":"http://themeforest/item/quik-v1-admin-skin/17314",
    "live_preview_url":"http://3.s3.envato./files/44557/1_green.__large_preview.jpg",
    "uploaded_on":"Fri Sep 05 07:30:24 +1000 2008","cost":"12.00",
    "item":"Quik v1 Admin Skin",
    "sales":"336",
    "rating":"5",
    "id":"17314"
    },
    {"thumbnail":"http://3.s3.envato./files/45212.jpg",
    "tags":"clean",
    "user":"collis",
    "url":"http://themeforest/item/freshcorp-business-template/17528",
    "live_preview_url":"http://3.s3.envato./files/45213/1_Homepage.__large_preview.jpg",
    "uploaded_on":"Tue Sep 09 06:10:50 +1000 2008",
    "cost":"20.00",
    "item":"FreshCorp - Business Template",
    "sales":"277",
    "rating":"4","id":"17528"
    },
    {"thumbnail":"http://0.s3.envato./files/45739.jpg",
    "tags":"clean",
    "user":"collis",
    "url":"http://themeforest/item/real-estate-html-template/17732",
    "live_preview_url":"http://0.s3.envato./files/45740/1_homepage.__large_preview.jpg",
    "uploaded_on":"Fri Sep 12 14:22:45 +1000 2008",
    "cost":"20.00","item":"Real Estate HTML Template",
    "sales":"175",
    "rating":"4",
    "id":"17732"
    }
]
}

Here's my script:

<script type="text/javascript">
//this gets JSON data from an url
$.getJSON("http://marketplace.envato./api/edge/new-files-from-user:collins,themeforest.json?callback=?",
//this function gets called when data has been recieved
function(data){
    //parsing JSON data, line by line(like foreach)
    $.each(data['new-items-from-user'], function(i,item){
        //puts all titles in our div
        $("#test").append(item.item+"<br />");
    });
});
</script>
<div id="test"></div>

And here's what I get in the Chrome console: 'Uncaught SyntaxError: Unexpected Token :' (pic http://imgur./8qoqO).

I'm not sure if I have an error in my code that's causing this problem, but here's a fiddle to see the result: http://jsfiddle/wkmDj/

Thanks, Matt

• javascript
• jquery
• json
• api

• the : in the url causes the error, either because jQuery parses it and doesn't like it or the XHR object itself doesn't like it. – roberkules Commented Jan 19, 2012 at 21:00
• Is there a workaround for that? Do you think URL encoding would solve it? – Matt Commented Jan 19, 2012 at 21:05
• Edit: on the Chrome console it says it's getting the error from the JSON feed, I'll update my post with a pic – Matt Commented Jan 19, 2012 at 21:07
• 1 Not sure if this is relevant either: my safari client plains that the resource is being sent with MIME type application/octet-stream. That doesn't sound right, does it? – dsummersl Commented Jan 19, 2012 at 21:08
• I think that the question mark at the end of your URL is one problem. The error message changes if you drop it. – seth.miller Commented Jan 19, 2012 at 21:09

3 Answers 3

In the second object in the list in the JSON response, there's a line break in the middle of a property name:

"sales":"272","
rating":"4",
"id":"22705"

Maybe that's just a transcription error.

edit — OK that was a transcription error. I think the problem is that the website you're talking to doesn't really understand JSONP properly. It's returning JSON that looks fine, but JSONP requires that the JSON be returned wrapped up in a function call. In other words, the response should look like:

somefunction({"new-items-from-user":[{ ... }]});

It's not doing that, so when the JSON is evaluated by itself it constitutes a syntax error because JavaScript thinks that leading { is the start of a code block, not an object literal.

Looking at the documentation for that API, I see nothing to suggest that it's intended to be used as a JSONP service. It looks like they intend that it be used from something like a phone app or from a web server or something like that, but not from JavaScript in the browser via JSONP.

One possible problem, the code has:

data['new-items-from-user']

But the data looks like this:

{"new-files-from-user":[]}

Like @Pointy said, response is not getting parsed as json, but as script. So eval function is being executed.

eval('{"new-files-from-user":[]}');

and it is giving error.

In the case of jsonp if the url is http://marketplace.envato./api/edge/new-files-from-user:mechabyte,themeforest.json, call should be made as

http://marketplace.envato./api/edge/new-files-from-user:mechabyte,themeforest.json?callback=mycallback

and response should be

mycallback({"new-files-from-user":[]});

and if you have a function mycallback

eval('mycallback({"new-files-from-user":[]});');

will work

or if you don't set a callback

http://marketplace.envato./api/edge/new-files-from-user:mechabyte,themeforest.json?callback=

the response should be

({"new-files-from-user":[]});

then

eval('({"new-files-from-user":[]});');

will work

In your case you can see that each time jQuery is setting the parameter callback like

callback=jQuery171009222313176259944_1327017091413

so the response should be

jQuery171009222313176259944_1327017091413({"new-files-from-user":[]});

e.g: https://twitter./statuses/user_timeline/tomhanks.json?callback=myCallback&count=5

But as the response is a json string this will work. (subject to same origin policy)

$.get("http://marketplace.envato./api/v3/new-files-from-user:turkhitbox,themeforest.json?callback=?",
function (data){
   data = $.parseJSON(data);
   console.log(data);
});