Javascript getJSON issue using Django callback

Question

I am trying to make a call with this script, but am getting a "Uncaught SyntaxError: Unexpected token :"

I can't figure out where I'm going wrong, I don't know if it's something with my callback. I am sending a valid JSON packet so I don't think that's the issue. Anyway, here's my html/jquery call:

<script>
function loadJSON(){
    $.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", function(data){
            alert('hey');
             $('result').append(data);
             alert('hey 2'); 
         $.each(data, function(i, json){});

    });
    alert('hey 3');
}
</script>

With this corresponding function in my django view:

def tonight_mobile(request):

    callback = request.GET.get('callback', '')

    def with_rank(rank, place):
        return (rank > 0)

    place_data = dict(
        Places = [make_mobile_place_dict(request, p) for p in Place.objects.all()]
    )

    xml_bytes = json.dumps(place_data)
    return HttpResponse(xml_bytes, content_type='application/json; charset=utf-8')

Here is my request being logged by my server (so I know its at least getting that far with a OK status code):

"GET /api/0.1/tonight-mobile.json&callback=jsonp1293142434434 HTTP/1.1" 200 167

Displaying this error in my javascript console:

Uncaught SyntaxError: Unexpected token : tonight-mobile.json&callback=jsonp1293142434434:1

If you need to see my JSON format (if that is what's causing this) please let me know and I can post it too.

Thank you in advance for your help!

UPDATE:

Here's the response coming from my server:

{"Places": [{"url": "http://localhost:8000/api/0.1/places/1.plist", "image_url": "http://localhost:8000/static/place_logos/Tsonoqua_Mask.gif", "name": "Boo's Place"}]}
[23/Dec/2010 17:37:22] "GET /api/0.1/tonight-mobile.json&callback=jsonp1293147441552 HTTP/1.1" 200 167

UPDATE 2:

I've managed to get my callback working correctly! Here's the code:

Client side:

<script>
function loadJSON(){
    $.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", logIt(data));
}
function logIt(data){
    window.console && console.log(data);
    alert('yay!');
}
</script>

Server side:

def tonight_mobile(request):
    callback = request.GET.get('callback', 'logIt')

    def with_rank(rank, place):
        return (rank > 0)

    place_data = dict(
        Places = [make_mobile_place_dict(request, p) for p in Place.objects.all()]
    )

    xml_bytes = json.dumps(place_data)

    if callback:
        xml_bytes = '%s(%s)' % (callback, xml_bytes)
    print xml_bytes

    return HttpResponse(xml_bytes, content_type='application/javascript; charset=utf-8')

This returns the following response:

logIt({"Places": [{"url": "http://localhost:8000/api/0.1/places/1.plist", "image_url": "http://localhost:8000/static/place_logos/Tsonoqua_Mask.gif", "name": "Boo's Place"}]})

Is this how it should function? It seems I should be able to simplify the getJSON call... I just want to make sure I've done everything I need to correctly with my callback before I continue forward parsing the response and setting them to elements on the page.

UPDATE 3*

So, I've made quite some progress!! I'm using Jquery mobile, so ignore some of the following overdone css, its not related to the core issue.

I'm having a problem looping over the "Places" in my JSON packet. I am getting a response with multiple "Places", but can't seem to figure out how to iterate over them. My 'i' variable in my each loop is working correctly for the first element, and displaying its corresponding name & image.

My getJSON and callback method have evolved into this:

<script>
function loadJSON(){
    $.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", callback(data));
}
function callback(data){
    $("#tonight-list").each(data.Places, function(i) {
        $(this).append("<li role='option' tabindex='" + data.Places[i] + "' class='ui-li-has-thumb ui-li ui-btn ui-btn-icon-right ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-down-c ui-btn-up-c' data-theme='c'><div class='ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last'><span class='ui-icon ui-icon-arrow-r'></span><div class='ui-btn-text'><img src=" + data.Places[i].image_url + " alt=" + data.Places[i].name + " class='ui-li-thumb ui-corner-tl ui-corner-bl'/><h1 class='list-title ui-li-heading' id='list-title'><a href='detail.html?id=slide' data-transition='slide' class='ui-link-inherit'>" + data.Places[i].name + "</a></h1><span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + data.Places[i].events + " events</span></div></div></li>");
    });

}
</script>

Here's my response:

callback({"Places": [{"url": "http://localhost:8000/api/0.1/places/3.plist", "image_url": "http://localhost:8000/static/place_logos/Bengals_1.png", "name": "Big 12", "events": 2}, {"url": "http://localhost:8000/api/0.1/places/2.plist", "image_url": "http://localhost:8000/static/place_logos/Makonde_Mask.gif", "name": "Harpo's", "events": 0}, {"url": "http://localhost:8000/api/0.1/places/1.plist", "image_url": "http://localhost:8000/static/place_logos/Quintons_1.png", "name": "Quinton's", "events": 1}]})

Am I confusing how the each function iterates over the JSON (which become) Javascript objects? I am pretty sure the each is my issue here, as I am only getting the FIRST element of the "Places" list. Can someone please help me out?

Yup the response is the issue, you're returning JSON, not JSONP. — Nick Craver
– Nick Craver, Commented Dec 23, 2010 at 22:38

keegan3d · Accepted Answer · 2010-12-23 22:44:21Z

2

Yes to return jsonp you need to wrap the response in a function:

def tonight_mobile(request):

    callback = request.GET.get('callback')

    def with_rank(rank, place):
        return (rank > 0)

    place_data = dict(
        Places = [make_mobile_place_dict(request, p) for p in Place.objects.all()]
    )

    xml_bytes = json.dumps(place_data)
    if callback:
        xml_bytes = '%s(%s)' % (callback, xml_bytes)
    return HttpResponse(xml_bytes, content_type='application/json; charset=utf-8')

answered Dec 23, 2010 at 22:44

keegan3d

11.4k10 gold badges57 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user546459 Over a year ago

Then, on my client side, how to I reference this wrapped function? I don't understand how my function within getJSON isn't doing this...

keegan3d Over a year ago

Your client side code looks correct already. "If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead" api.jquery.com/jQuery.getJSON. This is a great article about json and jsonp: javascriptweblog.wordpress.com/2010/11/29/json-and-jsonp

keegan3d Over a year ago

If the json and the webpage requesting the json are on the same domain then you don't need to serve it as jsonp. en.wikipedia.org/wiki/Same_origin_policy

user546459 Over a year ago

Thank you for the useful link keegan3d (javascriptweblog) - that really cleared things up for me to understand HOW everything was expecting to work. :) The Jquery API documentation just didn't give enough detail on the callback functionality. I've updated my current situation if you could look at "Update 2" and respond it would be much appreciated!

user546459 Over a year ago

I have updated my question, with quite the progress, and could use a little help on my iterator. see above

|

keegan3d · Accepted Answer · 2010-12-25 03:28:17Z

1

That looks good, you could simplify the getJSON call like this:

function loadJSON(){
    var url = "http://localhost:8000/api/0.1/tonight-mobile.json&callback=?";
    $.getJSON(url, function(data){
        if(data){
            console.log(data.name);
        }
    });
}

In your python code I would do

callback = request.GET.get('callback')

instead of

callback = request.GET.get('callback', 'logIt')

so if callback is not provided json will be returned instead of jsonp.

answered Dec 25, 2010 at 3:28

keegan3d

11.4k10 gold badges57 silver badges78 bronze badges

1 Comment

user546459 Over a year ago

Hey keegan, I've posted another update to my initial question, instead of cluttering SO with jargon. :) If you could lend me some direction with my iterator, that would be swell.:)

Ian Wetherbee · Accepted Answer · 2010-12-23 22:41:27Z

0

You're mixing JSON and JSONP. Your Django script is returning a JSON object, when jQuery is expecting a JSON object wrapped with the callback argument:

callback(JSON string);

answered Dec 23, 2010 at 22:41

Ian Wetherbee

6,1492 gold badges31 silver badges31 bronze badges

1 Comment

user546459 Over a year ago

I've updated my current situation and think I am doing my callback correctly - though it seems I should be able to simplify my client side call to the callback function?

Collectives™ on Stack Overflow

Javascript getJSON issue using Django callback

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related