django - JSON Response to jQuery

Question

I'm trying to glue these 2 pieces together, I don't even know where the problem is, there is no alert() and firebug does not tell me anything.

// django with yellow api to find_business search:
// ----------------------

def get_yellow(request):
   mimetype = 'application/json'
   yapi = YellowAPI(settings.YELLOW_API_KEY, test_mode=True, format='JSON', handlers=[])
   data = yapi.find_business(what='403-253-0395', where='Calgary', uid='127.0.0.1')
   print data #I can see here there is a result
   return HttpResponse(data,mimetype)

// jQuery 
// ----------------------

$(document).ready(function(){
    $.getJSON('http://myserver:8000/get_yellow/', 
    function(data) {
        alert('Fetched ' + data.length + ' items!');
    })

});

// I'm including a full response on a simple call, is this a valid json?
// ----------------------

{"summary":{"what":"403-253-0395","where":"Calgary","latitude":"","longitude":"","firstListing":1,"lastListing":1,"totalListings":1,"pageCount":1,"currentPage":1,"listingsPerPage":40},"listings":[{"parentId":"","isParent":false,"distance":"","content":{"Video":{"avail":false,"inMkt":false},"Photo":{"avail":false,"inMkt":false},"Profile":{"avail":false,"inMkt":false},"DspAd":{"avail":false,"inMkt":false},"Url":{"avail":false,"inMkt":false},"Logo":{"avail":false,"inMkt":false}},"id":"1931218","name":"Future Shop","address":{"street":"1180-33 Heritage Meadows Way SE","city":"Calgary","prov":"AB","pcode":"T2H3B8"},"geoCode":{"latitude":"50.987988","longitude":"-114.04424"}}]}

You're running JavaScript on the Django host? – Anders Mar 22 '11 at 14:22 — Anders, Mar 22 '11 at 14:22

Spike · Accepted Answer · 2011-03-22T14:37:11.907

1

There's a syntax error in your javascript. You're missing a semicolon. Should be:

$(document).ready(function(){
    $.getJSON('http://myserver:8000/get_yellow/', 
    function(data) {
        alert('Fetched ' + data.length + ' items!');
    });
});

Also, if all you're looking for is a way to debug your api code, simply type the url (http://myserver:8000/get_yellow/) into the address bar of your current browser. You should probably be doing this first before trying to call it using javascript.

Update:

If this is not a cross browser request, your call should look like:

$(document).ready(function(){
    $.getJSON('get_yellow/', 
    function(data) {
        alert('Fetched ' + data.length + ' items!');
    });
});

If it is a cross browser request, you should use jsonp instead:

$(document).ready(function(){
    $.ajax({
       type: "GET",
       url: "http://myserver:8000/get_yellow/",
       dataType: "jsonp",
       success: function(data) {
           alert('Fetched ' + data.length + ' items!');
       }
     });
});

edited Mar 22 '11 at 14:37

answered Mar 22 '11 at 14:02

Spike

5,040
5
32
47

@Spike I did type the url in the browser, that's how I got the output I've attached above. I fixed the semicolon, still does not work? – Shreko Mar 22 '11 at 14:14
Hmm. I just updated my answer to address another possible problem I noticed. – Spike Mar 22 '11 at 14:38
@Spike It is a cross browser, jquery is on my local machine, django server is on a different machine – Shreko Mar 22 '11 at 15:16
@Spike The original jquery script is directly from the book "JQuery from Novice to Ninja" with cross browser call to http://feeds.delicious.com/v2/json/tag/celebs?callback=?' and it works, but my call does not work either way. I've edited my question to include full output from yellowapi – Shreko Mar 22 '11 at 15:28
Since it's cross browser, have you tried using jsonp? Here's a link to more info on that: http://stackoverflow.com/questions/2067472/please-explain-jsonp – Spike Mar 22 '11 at 15:59
@Spike Thanks a lot for your help. Using the jsonp method together with wrapping json on the django side solved my problem. – Shreko Mar 22 '11 at 21:30

score 0 · Answer 2 · answered Mar 22 '11 at 14:23

There is a semicolon missing after your call to $.getJSON(). Not technically required but I've seen javascript act strange without them. What happens when you hit http://myserver:8000/get_yellow/ with your browser? Do you see the JSON?

The sample JSON you provided validates in JSONLint after I added a ']}' to the end (I'm assuming that isn't the full response. Are you sure that it's valid? From the jQuery API for getJSON():

As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently

score 0 · Answer 3 · answered Mar 22 '11 at 18:00

From the view, I always use the following code to push data to javascript and it works fine. The data can be in JSON format or not, try the following simple case first to see if data is pushed to javascript:

from django.utils import simplejson

def get_yellow(request):
    colours = ['red', 'blue', 'yellow']
    data = simplejson.dumps(colours)
    return HttpResponse(data, mimetype='application/javascript')

If you can alert the above values from javascript, try the following with your code:

def get_yellow(request):
   yapi = YellowAPI(settings.YELLOW_API_KEY, test_mode=True, format='JSON', handlers=[])
   data = yapi.find_business(what='403-253-0395', where='Calgary', uid='127.0.0.1')
   return HttpResponse(simplejson.dumps(data), mimetype='application/javascript')

using the above example what would be the jquery code to extract for example the color red? — avatar, Jun 18 '11 at 19:15

django - JSON Response to jQuery

3 Answers3