POSTing from Angular to Django

If you are using Django and AngularJS then you have probably run into the issue of trying to POST data to Djan go. For example,

$http({
    url: "<myawesomeview>",
    method: 'POST',
    data: { 'text': 'this is really important', 'date': '2014-06-09'}
})

The issue that arises is that AngularJS defaults to sending JSON data in the response body instead of urlencoded data, which is the type of data that Django is looking for. As a result, back in Django if we did the following

def myawesomeview(request):
    print request.POST
    print request.body

We would get

<QueryDict: {}>
u"{ 'text': 'this is really important', 'date': '2014-06-09'}"

back out on our console. If you have been using Django for even a little bit, then you realize that we were really expecting

<QueryDict: {u'text': u'this is really important', u'date': u'2014-06-09'}>
u"{ 'text': 'this is really important', 'date': '2014-06-09'}"

You can find my solution to this in this gist, which is kindly provided below:

UPDATE I found a bug in my previous version, I have updated it to address this, the primary issue was how list value were being handled.

class JSONMiddleware(object):
    """
    Process application/json requests data from GET and POST requests.
    """
    def process_request(self, request):
        if 'application/json' in request.META['CONTENT_TYPE']:
            # load the json data
            data = json.loads(request.body)
            # for consistency sake, we want to return
            # a Django QueryDict and not a plain Dict.
            # The primary difference is that the QueryDict stores
            # every value in a list and is, by default, immutable.
            # The primary issue is making sure that list values are
            # properly inserted into the QueryDict.  If we simply
            # do a q_data.update(data), any list values will be wrapped
            # in another list. By iterating through the list and updating
            # for each value, we get the expected result of a single list.
            q_data = QueryDict('', mutable=True)
            for key, value in data.iteritems():
                if isinstance(value, list):
                    # need to iterate through the list and upate
                    # so that the list does not get wrapped in an
                    # additional list.
                    for x in value:
                        q_data.update({key: x})
                else:
                    q_data.update({key: value})

            if request.method == 'GET':
                request.GET = q_data

            if request.method == 'POST':
                request.POST = q_data

        return None

The old naive version

class JSONMiddleware(object):
    """
    Process application/json requests data from GET and POST requests.
    """
    def process_request(self, request):
        if 'application/json' in request.META['CONTENT_TYPE']:
            data = urlencode(json.loads(request.body))

            if request.method == 'GET':
                request.GET = QueryDict(data)

            if request.method == 'POST':
                request.POST = QueryDict(data)

        return None

If you add this middleware to your Django install, it will process the JSON data and put it in the GET or POST variable as appropriate. There are, of course, other solutions to this problem, but using this middleware allows you to write you AngularJS or your Django views as intended, passing an object as the data and reading from request.POST.