-
setOpen(o=>!o)}>
-
- {open ? '▾' : '▸'}
-
- {keyName !== undefined &&
"{keyName}"}
- {keyName !== undefined &&
:}
-
- {bracket[0]}
-
- {!open && (
-
- {isArr ? `${entries.length} Einträge` : `${entries.length} Felder`}
-
- )}
- {!open &&
{bracket[1]}}
-
- {typeTag(data)}
-
+
setOpen(x=>!x)}>
+ {open?'▾':'▸'}
+ {keyName!==undefined && <>"{keyName}":}
+ {o}
+ {!open && {isArr?`${entries.length} Einträge`:`${entries.length} Felder`}}
+ {!open && {c}}
+ {typeTag(data)}
- {open && (
- <>
- {entries.map(([k,v]) => (
-
- ))}
-
- {bracket[1]}
-
-
- )}
+ {open && <>
+ {entries.map(([k,v]) => )}
+ {c}
+ }
);
}
-// ── JSON Builder: Baumstruktur erstellen ──
-let _nodeId = 1;
-function newNode(type='string', key='', value='') {
- return { id: _nodeId++, type, key, value, children:[] };
+// ── JSON Builder ──
+let _nid = 1;
+function newNode(type='string') { return {id:_nid++, type, key:'', value:'', children:[]}; }
+
+function nodeToJson(node) {
+ if (node.type==='object') { const o={}; node.children.forEach(c=>{o[c.key||`feld${c.id}`]=nodeToJson(c);}); return o; }
+ if (node.type==='array') { return node.children.map(c=>nodeToJson(c)); }
+ if (node.type==='number') return isNaN(Number(node.value))?0:Number(node.value);
+ if (node.type==='boolean') return node.value!=='false';
+ if (node.type==='null') return null;
+ return node.value;
}
-function BuilderNode({ node, depth, onChange, onDelete, onAddSibling }) {
- const indent = depth * 20;
- const canHaveChildren = node.type==='object' || node.type==='array';
-
- function addChild(type) {
- const child = newNode(type);
- onChange({...node, children:[...node.children, child]});
- }
-
- function updateChild(updated) {
- onChange({...node, children: node.children.map(c => c.id===updated.id ? updated : c)});
- }
-
- function deleteChild(id) {
- onChange({...node, children: node.children.filter(c => c.id!==id)});
- }
+const TC = {object:'#4ecdc4', array:'#ffe66d', string:'#a8f0eb', number:'#ff6b9d', boolean:'#c3b1e1', null:'rgba(255,255,255,0.4)'};
+function BuilderNode({node, depth, onChange, onDelete}) {
const inp = {...S.inp, fontSize:12, padding:'4px 7px', boxSizing:'border-box'};
- const typeColors = {object:'#4ecdc4', array:'#ffe66d', string:'#a8f0eb', number:'#ff6b9d', boolean:'#c3b1e1', null:'rgba(255,255,255,0.3)'};
+ const canKids = node.type==='object'||node.type==='array';
+ const isRoot = depth===0;
+
+ function addChild(type) { onChange({...node, children:[...node.children, newNode(type)]}); }
+ function updChild(u) { onChange({...node, children:node.children.map(c=>c.id===u.id?u:c)}); }
+ function delChild(id) { onChange({...node, children:node.children.filter(c=>c.id!==id)}); }
return (
-
+
- {/* Key (only for object children) */}
- {depth > 0 && node.type !== '__root' && (
- onChange({...node, key:e.target.value})}/>
)}
- {depth > 0 && :}
- {/* Type */}
-
- {/* Children */}
- {canHaveChildren && node.children.map(child=>(
-
deleteChild(child.id)}/>
+ {canKids && node.children.map(child=>(
+ delChild(child.id)}/>
))}
);
}
-function nodeToJson(node) {
- if (node.type==='object') {
- const obj = {};
- node.children.forEach(c => { obj[c.key || `field${c.id}`] = nodeToJson(c); });
- return obj;
- }
- if (node.type==='array') {
- return node.children.map(c => nodeToJson(c));
- }
- if (node.type==='number') return isNaN(Number(node.value)) ? 0 : Number(node.value);
- if (node.type==='boolean') return node.value !== 'false';
- if (node.type==='null') return null;
- return node.value;
-}
-
+// ── Main Tool ──
function JsonTool({ toast, mobile }) {
- const [tab, setTab] = useState('view');
- // View tab
- const [jsonInput, setJsonInput] = useState('');
- const [parsed, setParsed] = useState(null);
- const [parseErr, setParseErr] = useState('');
+ const [tab, setTab] = useState('view');
+ const [fmt, setFmt] = useState('json'); // 'json' | 'xml'
- function parseJson(val) {
- setJsonInput(val);
- if (!val.trim()) { setParsed(null); setParseErr(''); return; }
+ // View / Convert
+ const [rawInput, setRawInput] = useState('');
+ const [parsed, setParsed] = useState(null);
+ const [parseErr, setParseErr] = useState('');
+ const [xmlOut, setXmlOut] = useState('');
+ const [copiedOut, setCopiedOut] = useState(false);
+
+ function doParseJson(val) {
+ setRawInput(val);
+ setParseErr(''); setParsed(null); setXmlOut('');
+ if (!val.trim()) return;
+ const fixed = sanitizeJson(val);
try {
- setParsed(JSON.parse(val));
- setParseErr('');
+ const p = JSON.parse(fixed);
+ setParsed(p);
+ setXmlOut(jsonToXml(p));
} catch(e) {
- setParsed(null);
setParseErr(e.message);
}
}
- function formatJson() {
+ function doParseXml(val) {
+ setRawInput(val);
+ setParseErr(''); setParsed(null); setXmlOut('');
+ if (!val.trim()) return;
try {
- const p = JSON.parse(jsonInput);
- setJsonInput(JSON.stringify(p, null, 2));
- setParsed(p);
- setParseErr('');
- } catch {}
+ const obj = xmlToJson(val);
+ setParsed(obj);
+ setXmlOut(val);
+ } catch(e) {
+ setParseErr(e.message);
+ }
}
- // Build tab
- const [root, setRoot] = useState(() => ({...newNode('object'), key:'root'}));
- const generatedJson = JSON.stringify(nodeToJson(root), null, 2);
- const [copiedJson, setCopiedJson] = useState(false);
+ function handleInput(val) {
+ if (fmt==='json') doParseJson(val);
+ else doParseXml(val);
+ }
- async function copyJson(text) {
- try { await navigator.clipboard.writeText(text); setCopiedJson(true); setTimeout(()=>setCopiedJson(false),1800); }
+ function formatJson() {
+ if (!parsed) return;
+ setRawInput(JSON.stringify(parsed, null, 2));
+ }
+
+ async function copyText(text) {
+ try { await navigator.clipboard.writeText(text); setCopiedOut(true); setTimeout(()=>setCopiedOut(false),1800); }
catch { toast('Kopieren fehlgeschlagen'); }
}
- const inp = {...S.inp, fontSize:13, padding:'7px 9px', boxSizing:'border-box'};
- const tabs = [{id:'view',label:'👁 JSON ansehen'},{id:'build',label:'🔨 JSON bauen'}];
+ // Builder
+ const [root, setRoot] = useState(() => ({...newNode('object'), key:'root'}));
+ const [buildFmt, setBuildFmt] = useState('json');
+ const [copiedBld, setCopiedBld] = useState(false);
+
+ const builtJson = JSON.stringify(nodeToJson(root), null, 2);
+ const builtXml = (() => { try { return jsonToXml(nodeToJson(root)); } catch { return ''; } })();
+ const builtOut = buildFmt==='json' ? builtJson : builtXml;
+
+ async function copyBuilt() {
+ try { await navigator.clipboard.writeText(builtOut); setCopiedBld(true); setTimeout(()=>setCopiedBld(false),1800); }
+ catch { toast('Kopieren fehlgeschlagen'); }
+ }
+
+ const inp = {...S.inp, fontSize:13, padding:'7px 9px', boxSizing:'border-box'};
+ const tabs = [{id:'view',label:'👁 Ansehen & Konvertieren'},{id:'build',label:'🔨 Struktur bauen'}];
+
+ const FmtToggle = ({value, onChange}) => (
+
+ {['json','xml'].map(f=>(
+
+ ))}
+
+ );
return (
@@ -2139,28 +2180,78 @@ function JsonTool({ toast, mobile }) {
{tab==='view' && (