AngularJS Django Rest Framework - trying to replicate JS object raised on 400 server error

Question

This is my Django Rest Framework code / view which gets called when I try to register a user:

def post(self, request):
    serializer = UserSerializer(data=request.DATA)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

and this is my AngularJS code which registers a user / calls the Django view posted above:

self.add = function() {
    $http.post("/CMS/users", self.user) // this URL calls the Django view posted above
    .error(function(data, status, headers, config) {
        console.log(data);
        for (prop in data) {
            console.log(data[prop]);
        };
    })
    .then(fetchUsers); // gets a list of existing users
    console.log("User clicked submit with ", self.user);
};

When I try to register a user which already exists, this is what is logged:

Object {username: Array[1]}
    username: Array[1]
        0: "This username is already taken. Please, try again"
        length: 1
        __proto__: Array[0]
            concat: concat() { [native code] }constructor: Array() { [native code] }entries: entries() { [native code] }every: every() { [native code] }filter: filter() { [native code] }forEach: forEach() { [native code] }indexOf: indexOf() { [native code] }join: join() { [native code] }keys: keys() { [native code] }lastIndexOf: lastIndexOf() { [native code] }length: 0map: map() { [native code] }pop: pop() { [native code] }push: push() { [native code] }reduce: reduce() { [native code] }reduceRight: reduceRight() { [native code] }reverse: reverse() { [native code] }shift: shift() { [native code] }slice: slice() { [native code] }some: some() { [native code] }sort: sort() { [native code] }splice: splice() { [native code] }toLocaleString: toLocaleString() { [native code] }toString: toString() { [native code] }unshift: unshift() { [native code] }Symbol(Symbol.iterator): ArrayValues() { [native code] }Symbol(Symbol.unscopables): Object __proto__: Object
    __proto__: Object

["This username is already taken. Please, try again"] // this is data[prop]
User clicked submit with  Object {username: "a", password: "apass", email: "[email protected]"}

I'm trying to replicate the object because throughout my application, when I raise errors for forms, I want to keep consistency and raise errors the same way (where the object has the field name and then an array which holds a string error message which can be accessed using data[prop]).

So this is what I tried on JSfiddle: http://jsfiddle.net/snmyvqow/1/

var data = {username: {0: "test."}}

for (prop in data) {
    console.log(data);
    console.log(data[prop]);
}

The issue is, the above code logs this to the console:

Object {username: Object}
    username: Object
        0: "This username is already taken. Please, try again"
        __proto__: Object
    __proto__: Object

Object {0: "This username is already taken. Please, try again"} // this is data[prop]

Notice that data[prop] is different even though I tried to recreate the object in the same form. Another difference I noticed is that in my application, the length of the array inside the array gets logged, like so:

length: 1

but in my JSfiddle code, the length is not logged. The last difference I noticed is that in my JSfiddle code, the array inside the array is referred to as an Object whereas in my application, the array inside the array is referred to as an Array[1]. Any idea why? And how I can recreate the object / array so that data[prop] will return the string rather than returning

Object {0: "This username is already taken. Please, try again"}

?

Answer 1

Python Django serializer.errors (Read Here) by default return array form inside object. It mean it should return as below in your case.

 var data = {username: ["This username is already taken. Please, try again"]}

If you want to check then open Dev tool and see into Response tab.