toolbox/csv-json.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free CSV to JSON Converter — Parse, Convert, Download</title>
  <meta name="description" content="Convert CSV data to JSON format instantly. Auto-detect headers, handle quotes and special characters. Free online CSV to JSON converter.">
  <link rel="canonical" href="https://www.quicktools.mom/csv-json.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/csv-json.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is CSV?","acceptedAnswer":{"@type":"Answer","text":"CSV (Comma-Separated Values) is a simple file format for tabular data. Each line represents a row, and values are separated by a delimiter (usually a comma). It's widely used for data exchange between spreadsheets and databases."}},{"@type":"Question","name":"Does this handle quoted fields?","acceptedAnswer":{"@type":"Answer","text":"Yes. Fields enclosed in double quotes that contain commas, newlines, or other special characters are handled correctly."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header">
      <div class="tool-badge">🔄 Data</div>
      <h1>CSV to JSON Converter</h1>
      <p>Convert CSV data to JSON format instantly. Also supports JSON to CSV conversion.</p>
    </div>
    <div class="tool-card">
      <div class="controls-row mb-2">
        <div class="control-group"><label>Delimiter</label><select id="delimiter"><option value="," selected>Comma (,)</option><option value=";">Semicolon (;)</option><option value="\t">Tab</option><option value="|">Pipe (|)</option></select></div>
        <label class="toggle-wrapper" style="flex:1"><input type="checkbox" id="hasHeaders" checked> First row is headers</label>
      </div>
      <label>CSV Input</label>
      <textarea id="csvInput" class="mono" rows="8" placeholder="name,email,city
John,john@example.com,Berlin
Jane,jane@example.com,Zürich
Max,max@example.com,Wien">name,email,city
John,john@example.com,Berlin
Jane,jane@example.com,Zürich
Max,max@example.com,Wien</textarea>
      <div class="btn-group">
        <button class="btn btn-primary" onclick="csvToJson()">CSV → JSON</button>
        <button class="btn btn-secondary" onclick="jsonToCsv()">JSON → CSV</button>
      </div>
      <div class="output-area mt-3">
        <span class="output-label">Output</span>
        <pre id="output" style="max-height: 400px; overflow-y: auto;"></pre>
        <button class="copy-btn" onclick="copyOut()">Copy</button>
      </div>
      <div class="stats-bar">
        <div class="stat-item"><span class="stat-value" id="rowCount">0</span><span class="stat-label">Rows</span></div>
        <div class="stat-item"><span class="stat-value" id="colCount">0</span><span class="stat-label">Columns</span></div>
      </div>
      <div class="btn-group">
        <button class="btn btn-secondary" onclick="downloadJSON()">⬇ Download JSON</button>
        <button class="btn btn-secondary" onclick="downloadCSV()">⬇ Download CSV</button>
      </div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="faq-section">
      <h2>    <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About CSV to JSON Converter</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">CSV to JSON Converter is a free, browser-based tool built for students, professionals, and anyone who needs quick calculations. Convert CSV data to JSON format instantly. Auto-detect headers, handle quotes and special characters. Free online CSV to JSON converter. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
        <li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
        <li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
        <li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
      </ol>
    </div>
    Frequently Asked Questions</h2>
      <div class="faq-item"><h3>What is CSV?</h3><p>CSV (Comma-Separated Values) is a simple file format for tabular data. Each line represents a row, and values are separated by a delimiter (usually a comma). It's widely used for data exchange between spreadsheets and databases.</p></div>
      <div class="faq-item"><h3>Does this handle quoted fields?</h3><p>Yes. Fields enclosed in double quotes that contain commas, newlines, or other special characters are handled correctly.</p></div>
    </div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
      <a href="json-formatter.html"><span class="tool-icon">{ }</span> JSON Formatter</a>
      <a href="diff-checker.html"><span class="tool-icon">📊</span> Diff Checker</a>
      <a href="word-counter.html"><span class="tool-icon">📝</span> Word Counter</a>
      <a href="base64.html"><span class="tool-icon">🔄</span> Base64 Encoder</a>
    </div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    function parseCSV(text, delim) {
      const rows = []; let row = []; let field = ''; let inQuotes = false;
      for (let i = 0; i < text.length; i++) {
        const ch = text[i];
        if (inQuotes) {
          if (ch === '"' && text[i+1] === '"') { field += '"'; i++; }
          else if (ch === '"') { inQuotes = false; }
          else { field += ch; }
        } else {
          if (ch === '"') { inQuotes = true; }
          else if (ch === delim) { row.push(field.trim()); field = ''; }
          else if (ch === '\n' || (ch === '\r' && text[i+1] === '\n')) {
            if (ch === '\r') i++;
            row.push(field.trim()); rows.push(row); row = []; field = '';
          } else { field += ch; }
        }
      }
      if (field || row.length) { row.push(field.trim()); rows.push(row); }
      return rows.filter(r => r.some(c => c));
    }

    function csvToJson() {
      const text = document.getElementById('csvInput').value;
      let delim = document.getElementById('delimiter').value;
      if (delim === '\\t') delim = '\t';
      const rows = parseCSV(text, delim);
      if (rows.length === 0) return;
      const hasHeaders = document.getElementById('hasHeaders').checked;
      let json;
      if (hasHeaders) {
        const headers = rows[0];
        json = rows.slice(1).map(row => {
          const obj = {};
          headers.forEach((h, i) => obj[h] = row[i] || '');
          return obj;
        });
      } else {
        json = rows;
      }
      const output = JSON.stringify(json, null, 2);
      document.getElementById('output').textContent = output;
      document.getElementById('rowCount').textContent = hasHeaders ? rows.length - 1 : rows.length;
      document.getElementById('colCount').textContent = rows[0].length;
    }

    function jsonToCsv() {
      try {
        const json = JSON.parse(document.getElementById('csvInput').value);
        if (!Array.isArray(json)) throw new Error('Input must be a JSON array');
        const headers = Object.keys(json[0]);
        let delim = document.getElementById('delimiter').value;
        if (delim === '\\t') delim = '\t';
        const csv = [headers.join(delim), ...json.map(row => headers.map(h => {
          const val = String(row[h] || '');
          return val.includes(delim) || val.includes('"') || val.includes('\n') ? `"${val.replace(/"/g,'""')}"` : val;
        }).join(delim))].join('\n');
        document.getElementById('output').textContent = csv;
        document.getElementById('rowCount').textContent = json.length;
        document.getElementById('colCount').textContent = headers.length;
      } catch(e) {
        document.getElementById('output').textContent = 'Error: ' + e.message;
      }
    }

    function copyOut() { navigator.clipboard.writeText(document.getElementById('output').textContent).then(()=>{const b=document.querySelector('.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000)}); }

    function downloadJSON() {
      const blob = new Blob([document.getElementById('output').textContent], {type:'application/json'});
      const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'data.json'; a.click();
    }
    function downloadCSV() {
      const blob = new Blob([document.getElementById('output').textContent], {type:'text/csv'});
      const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'data.csv'; a.click();
    }
  </script>
<script src="ads.js"></script>
</body>
</html>