3

I'm trying to download some data using pure javascript/html from cross-domain, dropbox to be specific.

<html>
<head>
</head>
<body>
    <div id = 'twitterFeed'></div>
    <script>
    function myCallback(dataWeGotViaJsonp){
        var text = '';
        var len = dataWeGotViaJsonp.length;
        for(var i=0;i<len;i++){
            twitterEntry = dataWeGotViaJsonp[i];
            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
        }
        document.getElementById('twitterFeed').innerHTML = text;
    }
    </script>
    <script type="text/javascript" src="http://dl.dropbox.com/u/6438697/padraicb.json?count=10&callback=myCallback"></script>
</body>

for some reason, the json is not loading. however the json loads correctly when I make the url "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback" instead. I got this example from here

Can anybody explain why dropbox doesn't work?

thanks!

UPDATE:

<script type=text/javascript>
function myCallback(dataWeGotViaJsonp){
    alert(dataWeGotViaJsonp);
}
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/6438697/test2?&callback=myCallback"></script>

returns either [object object] or undefined... something is still wrong? the contents of test.json is myCallback( {"your":"json"} );

Community
  • 1
  • 1
ejang
  • 3,982
  • 8
  • 44
  • 70
  • 1
    Re: the update, you're alerting the object. To alert the string `json`, `alert(dataWeGotViaJsonp.your);` – Yahel Aug 06 '11 at 12:35

2 Answers2

6

You can't just add the word 'callback' to your URL and expect Dropbox to wrap it for JSONP. You put a JSON file on your Dropbox and shared it publicly, but Dropbox isn't a dynamic server. You need a scriptable environment to take the callback parameter value and wrap it around the JSON in order to make it "JSONP".

The reason the Twitter URL works is that their API is configured to take the callback parameter as a sign that the client is expecting JSONP, which is really just a fancy term for "a JavaScript object literal wrapped in a callback function". You tell twitter what that function will be called, and they'll return a file that the browser will execute as a script, passing the object as a parameter to your callback function.

If you don't need the JSONP callback function name to be dynamic AND you need to use Dropbox, just wrap the JSON yourself. All you need to do is edit the file, and prepend valid JSON with the name of the function, and append it with the close paren.

ie,

myCallback(  {"your":"json"}  );
Yahel
  • 37,023
  • 22
  • 103
  • 153
1

It is possible to use Google Apps Script as a proxy for hosting sites that do not support jsonp. There is writeup on how to do it here http://ramblings.mcpher.com/Home/excelquirks/jsonp

bruce
  • 1,408
  • 11
  • 33