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?

Answer 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.

Answer 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')

Answer 3

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);