Using JSONP with flaskr and javascript

Question

I'm using Flaskr to generate data via a RESTful API. My call looks like:

http get localhost:5000/v1.0/dataset dataset_id==f7e7510b3c1c4337be339446ca000d22

and returns something like:

{"sites": "a"}

Now I'm tring to fetch this data with my web app. I first ran into a cross-domain error, but after some reading, found out that I could by-pass that error by using jsonp. Basically copying a piece of code I found here, I put this together (I'm new to JavaScript):

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        (function($) {
        var url = 'http://localhost:5000/v1.0/dataset?dataset_id=f7e7510b3c1c4337be339446ca000d22&callback=?';
        $.ajax({
           type: 'GET',
            url: url,
            async: false,
            jsonpCallback: 'jsonCallback',
            contentType: "application/json",
            dataType: 'jsonp',
            success: function(json) {
               console.dir(json.sites);
            },
            error: function(e) {
               console.log(e.message);
              $('#data').html('the error was thrown');
            }
        });

        })(jQuery); 
    </script>
</head>
<body>
    <div id = 'data'></div>
    <p> place holder </p>
</body>

and accordingly changed my python response to look like:

"jsonCallback({\"sites\":\"a\"});"

If this helps, my flaskr return line is the following:

 return callback_function + '({"sites":"a"});'

I'm fairly confident my python side of the problem is good, but I'm not well versed enough in JS to determine where the error is coming from. My goal is to simply display my data on the page.

score 0 · Answer 1 · answered Nov 23 '14 at 22:26

I'm not sure what's not working with your code. Because you haven't written any error message or what happens when your code runs.

Any way the following script does a JSONP request to http://jsonplaceholder.typicode.com/users/1/todos service and returns one todo item. I have used this only to have a service that returns some data.

If you are going to the developer console in your browser to network and click on the request to the rest service you'll see under response that jQuery is adding a callback to the JSON so you don't need to add it in your URL.

See the following screenshot. (The screenshot is from Firefox.) Network view for JSONP response

I have added a working ajax example below. If you prefer jsFiddle, you'll find the same example here.

(function ($) {
    //var url = 'http://localhost:5000/v1.0/dataset?dataset_id=f7e7510b3c1c4337be339446ca000d22';
    var url = 'http://jsonplaceholder.typicode.com/todos/1'; // dummy url

    var jsonCallback = function (data) {
        console.log(data);
        $('#data').html(JSON.stringify(data, null, 2));
    };

    $.ajax({
        type: 'GET',
        url: url,
        contentType: "application/json",
        dataType: 'jsonp'
    }).done(jsonCallback)
    .fail(function (xhr) {
        alert("error" + xhr.responseText);
    });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre id='data'></pre>

thanks for the thorough response. I used the example you provided with my URL, but I get "SyntaxError: missing ; before statement" and a link to my data. My data is valid json. If however I change my response to be jsonp, then I simply get no error, the call goes through but no response... — marc, Nov 24 '14 at 23:48

Using JSONP with flaskr and javascript

1 Answers1