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?

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

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.