JSFiddle - React, Tailwind, and code Playground
JavaScript
const data = {
"a": {
"0": {"attr1": ["attr1 error"], "attr2": ["attr2 error"]},
"1": {"attr2": ["attr2 error1", "attr2 error2"]},
"2": {"attr1": ["attr1 error"], "attr4": ["attr4 error"]}
},
"b": {"some_attr": ["some_attr error"]}
};
let jsonToList = function(data) {
const $list = $('ul');
if (typeof data.length === 'undefined') {
$.each(data, function(k, v) {
$('li').text(k).append(jsonToList(v)).appendTo($list);
});
} else {
$.each(data, function(v) {
$('li').text(v).appendTo($list);
});
}
return $list;
}
/*
function createErrorDisplay(data) {
const list = document.createElement('ul');
if (typeof data.length === 'undefined') {
for (const key of Object.keys(data)) {
const item = document.createElement('li');
item.innerText = key;
item.appendChild(createErrorDisplay(data[key]));
list.appendChild(item);
}
}
else {
for (const value of data) {
const item = document.createElement('li');
item.innerText = value;
list.appendChild(item);
}
}
return list;
}
*/
$('body').append(jsonToList(data));
// document.body.appendChild(createErrorDisplay(data));