Skip to content

Instantly share code, notes, and snippets.

@vikas-git
Last active January 23, 2020 09:18
Show Gist options
  • Save vikas-git/9eb85dd8428338dcee072a97c5eed827 to your computer and use it in GitHub Desktop.
Save vikas-git/9eb85dd8428338dcee072a97c5eed827 to your computer and use it in GitHub Desktop.
JS/Jquery Error parser for Django-rest-framework errors structure.
/*
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment