JS/Jquery Error parser for Django-rest-framework errors structure.

drf_error_handler.js

/*
* Handle Django serializers errors and return error in html (ul/li) format.
*
* Error structure examples
*   // The most simple case
*   { detail: "Authentication is required" }
*   
*   // Simple form validation error
*   { title: ["This field is required."], "description": ["This field is required."]}
*
*   // Simple list validation error
*   [{}, {"title": ["This field is required."]}]
*
*   // Complex nested object validation error
*     {"experience": [
*         {}, {}, {"position": ["This field is required."], "employer": ["This field is required."]}
*     ]}
*     
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        parseErrors = function(data) {
            function _camelCaseToVerbose(text) {
                return text.replace(/(?=[A-Z])/g, ' ');
            }

            function _underscoredToVerbose(text) {
                return text.replace(/[\d_]/g, ' ');
            }

            function _capitalize(text) {
                text = text.toLowerCase();
                text = text.charAt(0).toUpperCase() + text.slice(1);
                return text;
            }

            function isString(value){
                if($.type(value) === "string"){
                    return true;
                }
                return false;
            }

            function _parseErrorItem(item, listPos) {
                var listItemTemplate = '<li class="list-item"><span class="list-item-pos">Item <item_count></span><content></li>',
                containerTemplate = '<ul class="item"><content></ul>',
                output = [];

                $.each(item, function( key, value ) {
                    var fieldTemplate = '<li class="field"><span class="name"><name>: </span><content></li>',
                        plainValueTemplate = '<span class="value"><value_content></span>',
                        plainValue,
                        listValue,
                        content;

                    if (isString(value)) {
                        plainValue = value;
                    } else if ($.isArray(value)) {
                        if (isString(value[0])) {
                            plainValue = value.join(' ');
                        } else {
                            listValue = _parseErrorList(value);
                        }
                    }

                    if (plainValue) {
                        content = plainValueTemplate.replace("<value_content>", plainValue);
                    } else if (listValue) {
                        content = listValue;
                    }

                    if (content) {
                        if (key.search(/[A-Z]/) != -1)
                            key =_camelCaseToVerbose(key);

                        if (key.search(/[\d_]/) != -1)
                            key =_underscoredToVerbose(key);

                        key = _capitalize(key);
                        output.push( fieldTemplate.replace("<name>", key).replace("<content>", content) );
                    }
                });

                output = output.join('');
                if (output) {
                    output = containerTemplate.replace("<content>", output)
                    if (listPos) {
                        output = listItemTemplate.replace("<item_count>", listPos).replace("<content>", output);
                    }
                }
                return output;
            }

            function _parseErrorList(items) {
                var containerTemplate = '<ul class="list"><content></ul>',
                    output = [];

                $.each(items, function(i, item) {
                    if ($.trim(item) != ''){
                        output.push(_parseErrorItem(item, i + 1));
                    }
                });

                output = output.join('');
                if (output) {
                    output = containerTemplate.replace("<content>", output);
                }
                return output;
            }


            if ($.isArray(data)) {
                return _parseErrorList(data);
            } else {
                return _parseErrorItem(data);
            }

        };

        // Test example - remove it if you will use my gist in your code!
        var a = [
            {"detail": "Authentication is required."},
            {"title": ["This field is required.", "Bad format."], "description": ["This field is required."]},
            [{} ,{"someKindOfField22": ["This field is required22."]}, {"someKindOfField": ["This field is required."]}],
            {"experience": [{}, {}, {"position_at_company": ["This field is required."],
            "employer": ["This field is required."]}]}
        ]

        $.each(a, function(index, value){
            $('body').append(parseErrors(value))
        });

    });
</script>