How to serialize an array posted to a django backend

Question

I'm trying to serialize an array that comes from a form. The array looks like this:

some_id: 12
array1[]:1
array1[]:2
array2[]:5
array2[]:6

or, as it arrives in request.POST

<QueryDict: {
    'array1[]': ['1', '2'], 
    'array2[]': ['5', '6'], ...

Now I get the serializer working for the simple id: some_id = serializers.IntegerField(), which is great. I've tested it without the arrays and everything works as expected.

For the array I thought I found this serializer field: listfield
I tried the following implementation:

array1 = serializers.ListField(
    child=serializers.IntegerField(min_value=1)
)

This looks like the manual says how it works, but it only seems to give me the following error:

TypeError at /api/myendpoint/ 'int' object is not iterable

I'm not really sure where I went wrong, maybe I'm on the wrong track (really not a Django guy :) ), but I'm sure it's a small mistake.

So how can I serialize a posted array (or should I call it a Dict?)

The complete trace doesn't seem to be containing anything strange, but i've kept it available on pastebin

The data is posted with this jquery code:

var mydata = {
    array1: [1,2],
    array2: [5,6],
    some_id: 12
};

$.ajax({
    url: "http://domain.com//api/myendpoint/",
    dataType: "json",
    data: mydata,
    method: "POST"
})

I'm using:

• Django 1.10.2
• djangorestframework 3.5.2
• jquery 2.1.4

Answer 1

Long story short: I've added this to my javascript:

jQuery.ajaxSettings.traditional = true;

and now it works like you'd expect

short story long:

The biggest issue was that a 'simple' post isn't as simple as I thought. From the question, this was what jQuery was posting:

some_id: 12
array1[]:1
array1[]:2
array2[]:5
array2[]:6

The object that was send from the frontend, and was expected in the backend contained properties called array1 and array2, but what was send was literally array1[] and array2[]. While the solution by Daniel van Flymen will probably work to use these properties, I have been looking at fixing these brackets.

From this rather old jquery topic I found that jQuery adds these for languages like php and ruby, but as I found out: python doesn't like it

With the addition of jQuery.ajaxSettings.traditional = true;, the headers now look like this:

some_id: 12
array1:1
array1:2
array2:5
array2:6

and this is what the serializer understands as expected.

Answer 2

Your values aren't being sent as an array. They are being sent as individual keys.

If your intention is to deserialize the keys to an array, then you can override the to_internal_value() method on your serializer:

class CustomSerializer(serializers.Serializer):
    my_array = serializers.ListField(
        child=serializers.IntegerField(min_value=1)
    )

    def to_internal_value(self, data):
        my_array = []
        for key, value in data.items():
            if "array[]" in key:
                my_array.append(value)

        # Perform some validation on your array
        for item in array:
            if item > 10:
                raise ValidationError(
                    {
                        'my_array': "A number was higher than 10."
                    }
                )

        # Return the validated values    
        return {
            'my_array': my_array
        }

The to_internal_value() method is responsible for deserializing data. Hopefully this points you in the right direction. Be sure to check out the example in the documentation on to_internal_value().