Unable to retrieve an Array of objects posted to Django from jQuery

Question

My Javascript:

var postData = {
    customer: 'test', 
    order: 1, 
    boxes: [
        {
            "size":"2",
            "color":"1",
            "colorNumber":"1",
            "barCode":"1234567890",
            "barCodePic":"",
        },
        {
            "size":"3",
            "color":"1",
            "colorNumber":"2",
            "barCode":"0987654321",
            "barCodePic":"",
        }
    ]
}

jQuery.post("http://10.0.1.7:8001/bapi/order/", postData );

My Python:

print 'Customer:', request.POST.get('customer', None)                   
print 'Order:', request.POST.get('order', None)                         
print 'get - boxes:', request.POST.get('boxes', None)                    
print 'get - boxes[]:', request.POST.get('boxes[]', None)               
print 'getlist - boxes[]:', request.POST.getlist('boxes[]')             
print 'getlist - boxes:', request.POST.getlist('boxes')                                                                      
print request.POST                                                      

The output:

Customer: test
Order: 1
get - boxes: None
get - boxes[]: None
getlist - boxes[]: []
getlist - boxes: []
<QueryDict: {u'customer': [u'test'], u'boxes[1][barCode]': [u'0987654321'], u'boxes[0][size]': [u'2'], u'boxes[1][colorNumber]': [u'2'], u'boxes[1][size]': [u'3'], u'boxes[0][colorNumber]': [u'1'], u'boxes[1][color]': [u'1'], u'boxes[0][barCode]': [u'1234567890'], u'boxes[1][barCodePic]': [u''], u'boxes[0][barCodePic]': [u''], u'boxes[0][color]': [u'1'], u'order': [u'1']}>

Nothing I do gets me the list as I would expect. I'm hoping to get a python list containing dictionaries for each 'box' object.

I've been advised to use 'boxes[]' as the parameter name in javascript, so my post data would be:

var postData = {
    customer: 'test', 
    order: 1, 
    'boxes[]': [
        {
            "size":"2",
            "color":"1",
            "colorNumber":"1",
            "barCode":"1234567890",
            "barCodePic":"",
        },
        {
            "size":"3",
            "color":"1",
            "colorNumber":"2",
            "barCode":"0987654321",
            "barCodePic":"",
        }
    ]
}

When trying that, the output is:

Customer: test
Order: 1
get - boxes: None
get - boxes[]: [object Object]
getlist - boxes[]: [u'[object Object]', u'[object Object]']
getlist - boxes: []
POST BELOW
<QueryDict: {u'customer': [u'test'], u'boxes[]': [u'[object Object]', u'[object Object]'], u'order': [u'1']}>

You can see right in the QueryDict that's just a list of unicode strings containing '[object Object']. No object data is actually there.

Answer 1

You need to encode the JavaScript objects first. Those cannot be passed directly via GET or POST parameters.

Try calling JSON.stringify() on the JavaScript objects before you POST it with jQuery (that is, the arbitrary data enclosed with { "size":"3", "color":"1" ... } ). For example:

[

    JSON.stringify({
        "size":"2",
        "color":"1",
        "colorNumber":"1",
        "barCode":"1234567890",
        "barCodePic":"",
    }),
    JSON.stringify({
        "size":"3",
        "color":"1",
        "colorNumber":"2",
        "barCode":"0987654321",
        "barCodePic":"",
    })

]

Then within Python, use something like to decode it:

import json
box_0_string = request.POST.get('boxes[]')[0]
box_0_dict = json.loads(box_0_string)

To get the individual JSON objects.