Как перепроектировать jsoneditor для отображения данных JSON, чтобы дизайн полей и значений более удобен для пользовател ⇐ Javascript

[Anonymous]

Как перепроектировать jsoneditor для отображения данных JSON, чтобы дизайн полей и значений более удобен для пользователя? Текущий дизайн совершенно не подходит для этой цели. Я бы хотел, чтобы дизайн был динамическим, так что поля и значения генерируются из данных JSON. < /P>


function onEditingStart(e) {
currentEditingData = e.data;

setTimeout(() => {
const container = document.getElementById("json-editor-container");
if (container) {
container.innerHTML = "";

//const options = {
// mode: 'form',
// // modes: ['tree', 'form', 'code'],
// // disableEditJson: true, // JSON
// // disableProperties: true , //
// onChangeJSON: function (json) {
// if (e.component && e.data && jsonEditorInstance) {
// console.log(jsonEditorInstance);
// const updatedJson = jsonEditorInstance.get();
// console.log(updatedJson);
// // e.component.cellValue(e.key, "Parameters", JSON.stringify(updatedJson));
// currentEditingData.Details = JSON.stringify(updatedJson);
// }
// }
//};
const options = {
modes: ['tree', 'form', 'view'],
search: true,
onError: (err) => console.error(err),

// القالب الديناميكي الرئيسي
templates: [
{
text: 'Dynamic Image Preview',
field: '*', // تطبق على جميع الحقول
template: (value, path) => {
// الفحص الديناميكي إذا كانت القيمة تمثل صورة
console.log(value);
console.log(path);
if (isImageField(value)) {
return renderImagePreview(value);
}
// فحص خاص للحقول التي تحتوي على مصفوفة من الصور
if (Array.isArray(value) && value.every(isImageField)) {
return value.map(img => renderImagePreview(img)).join('');
}

// إرجاع القيمة الأصلية إذا لم تكن صورة
return value;
}
}
]
};
jsonEditorInstance = new JSONEditor(container, options);

try {
const processedData = e.data.Details ? JSON.parse(e.data.Details) : {};
console.log(processedData);
const initialJson = processDynamicFields(processedData, baseUrl+'/');
//const initialJson = processedData ? JSON.parse(processedData) : {};
// const editor = new JSONEditor(container, options, processedData);
console.log(initialJson);
jsonEditorInstance.set(initialJson);
} catch (err) {
jsonEditorInstance.set({});
}
}
}, 100);
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ign-of-the