Django: Reading Array of JSON objects from QueryDict

Question

How do I pass a composite JSON structure via AJAX call from JS and on the server side, read it as a "very similar" data structure in python?

I understand that json formatting can be used (simplejson etc), but I somehow feel that the QueryDict itself is malformed or reformatted in my case?

Example:

When passing an array of JSON objects [{"id": 1},{"id": 2},{"id": 3}] via AJAX to Django view, the QueryDict gets formatted as:

POST:<QueryDict: {u'json_data[0][id]': [u'1'], u'type': [u'clone'], 
u'csrfmiddlewaretoken': [u'69bb3c434ced31ab301ede04bf491ec0'], 
u'json_data[1][id]': [u'2'], u'json_data[2][id]': [u'3']}>

How do I even iterate through the json_data?

I want to get something like this instead:

POST:<QueryDict: {u'json_data': [{u'id': [u'1']}, {u'id': [u'2']}, {u'id': [u'3']}]},
u'csrfmiddlewaretoken': [u'69bb3c434ced31ab301ede04bf491ec0'], u'type': [u'clone']>

So that I can access QueryDict as a dictionary and retrieve json_data as a list and process it in a certain order: maybe just iterate through them in sequential list order. Something like:

ret = request.POST
for item in ret['json_data']:
    process(item['id'])

In fact the value that goes into process() could be another dictionary of key value pairs instead of just a number (1,2,3 etc)

Javascript:

var test = [{"id": 1},{"id": 2},{"id": 3}];
$.post(
    "/insert_tc",
    {
      json_data: test,
      "type": 'clone',
      "csrfmiddlewaretoken": $csrf_token
    },  
    function(json) {
        //CALLBACK
    },
    "json"
);  

views.py:

def insert_tc(request):
    if request.method == 'POST':       
    ret = request.POST
    type = ret['type']
    list = ret.getlist(ret)

But list returns empty []

I tried simplejson dumps, loads, items, get methods but none of them helped.

I even tried jQuery.param( obj, true ), but that's not what I want (although somewhat close).

Is there a different/better way to pass composite data structures back and forth Django <-> JS via AJAX?

Ambassadress

Something is definitely wrong, because the code as posted would definitely not give that QueryDict result. Please can you post the exact code that outputs that? – Riyal

I'm afraid the JS code is accurate. I copy pasted both JS snippet and output of print request from views.py with minor formatting. 'test' is the array of objects that I'm passing. – Ambassadress

Sorry, my mistake. See my answer below. – Riyal

Answer 1

You should stringify your JSON using JSON.stringify(). This will convert the JSON Object into string format so it can be parsed correctly on the other end. On the other end you will need to use json.loads() to "unstringify" the object.

javascript:

var test = [{"id": 1},{"id": 2},{"id": 3}];
$.post(
    "/insert_tc",
    {
      json_data: JSON.stringify(test),
      "type": 'clone',
      "csrfmiddlewaretoken": $csrf_token
    },  
    function(json) {
        //CALLBACK
    },
    "json"
);  

View:

import json
def insert_tc(request):
    if request.method == 'POST':       
        ret = request.POST
        type = ret['type']
        list = json.loads(ret['json_data'])

Paronymous

Thanks! Although Daniel's answer was timely and really helped me get past the hurdle, I'm switching to this to be the accepted answer since JSON.stringify() does the job more cleanly. – Ambassadress

JSON doesn't seem to be available in older versions of IE. Thought someone would want to know. Still seems like the best way to do it, though. – Lilian

Answer 2

This is actually jQuery, not Django, being strange. Your test variable does not contain JSON, but actual JS objects. jQuery, for reasons best known to itself, parses this into some very weird format before posting, hence the result you get. If you did this instead (note the quotes around the whole thing):

var test = '[{"id": 1},{"id": 2},{"id": 3}]';

you'd find you get very nearly the QueryDict you expect: the only thing you then need to do is to call json.loads(ret['json_data']).

Also for reasons that I can't understand. jQuery doesn't contain any functionality to convert your array of objects to JSON. You'll need to find a plugin or separate library for that.

Riyal

My faith in humanity has been restored. Thank you! I almost got it working. It would be great to know the reason behind this behavior (Some writeup/links perhaps?) – Ambassadress