Patrick
59 lines
3.7 KiB
HTML
59 lines
3.7 KiB
HTML
<!-- ═══════════════ JSON TO CSV ═══════════════ -->
|
|
<div class="page" id="page-jsoncsv">
|
|
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
|
<div class="section-header">
|
|
<h2><i class="fas fa-table" style="color:var(--green)"></i> JSON ↔ CSV Converter</h2>
|
|
<p>Convert between JSON arrays and CSV format.</p>
|
|
</div>
|
|
<div class="split-panel">
|
|
<div>
|
|
<div class="panel-label">JSON Input</div>
|
|
<textarea id="jsoncsvJsonInput" placeholder='[{"name":"Alice","age":30},{"name":"Bob","age":25}]'></textarea>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" onclick="jsonToCsv()"><i class="fas fa-arrow-right"></i> JSON → CSV</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="panel-label">CSV Input</div>
|
|
<textarea id="jsoncsvCsvInput" placeholder='name,age Alice,30 Bob,25'></textarea>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" onclick="csvToJson()"><i class="fas fa-arrow-left"></i> CSV → JSON</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-label" style="margin-top:20px;">Output</div>
|
|
<textarea id="jsoncsvOutput" readonly placeholder="Converted output will appear here..." style="min-height:160px;"></textarea>
|
|
<div class="btn-group">
|
|
<button class="btn btn-green" onclick="copyOutput('jsoncsvOutput')"><i class="fas fa-copy"></i> Copy</button>
|
|
<button class="btn btn-secondary" onclick="downloadJsoncsvOutput()"><i class="fas fa-download"></i> Download</button>
|
|
</div>
|
|
<div class="status" id="jsoncsvStatus"></div>
|
|
<div class="api-usage">
|
|
<button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">REST</span></span><i class="fas fa-chevron-down"></i></button>
|
|
<div class="api-usage-body">
|
|
<div class="api-baseurl-note">All examples use <code>BASE_URL</code> — set it to your deployment URL, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
|
|
<div class="api-endpoint">
|
|
<span class="api-method post">POST</span><span class="api-path">/api/convert/json-to-csv</span>
|
|
<div class="api-desc">Convert a JSON array to CSV format.</div>
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/convert/json-to-csv`</span>, {
|
|
method: <span class="str">"POST"</span>,
|
|
headers: { <span class="str">"Content-Type"</span>: <span class="str">"application/json"</span> },
|
|
body: JSON.<span class="fn">stringify</span>({ json: <span class="str">'[{"name":"Alice","age":30}]'</span> })
|
|
});
|
|
<span class="cm">// → { success: true, result: "name,age\nAlice,30" }</span></div>
|
|
</div>
|
|
<div class="api-endpoint">
|
|
<span class="api-method post">POST</span><span class="api-path">/api/convert/csv-to-json</span>
|
|
<div class="api-desc">Convert CSV text to a JSON array.</div>
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/convert/csv-to-json`</span>, {
|
|
method: <span class="str">"POST"</span>,
|
|
headers: { <span class="str">"Content-Type"</span>: <span class="str">"application/json"</span> },
|
|
body: JSON.<span class="fn">stringify</span>({ csv: <span class="str">"name,age\nAlice,30"</span> })
|
|
});
|
|
<span class="cm">// → { success: true, result: [{"name":"Alice","age":"30"}] }</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|