JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html>
<head>
  <title>JSON to CSV with json2csv</title>
  <script src="https://cdn.jsdelivr.net/npm/json2csv/dist/json2csv.umd.min.js"></script>
</head>
<body>
  <textarea id="jsonInput" rows="10" cols="50">
[
  { "name": "John", "age": 30, "address": "123 Main St" },
  { "name": "Jane", "age": 25, "address": "456 Maple Ave" }
]
  </textarea>
  <br>
  <button onclick="convertToJson()">Convert to CSV</button>
  <br>
  <textarea id="csvOutput" rows="10" cols="50"></textarea>
</body>
</html>

JavaScript

function convertToJson() {
  const jsonInput = document.getElementById('jsonInput').value;
  try {
    const jsonArray = JSON.parse(jsonInput);
    const fields = Object.keys(jsonArray[0]);
    const opts = { fields };
    const parser = new json2csv.Parser(opts);
    const csv = parser.parse(jsonArray);
    document.getElementById('csvOutput').value = csv;
  } catch (err) {
    console.error('Invalid JSON input:', err);
    alert('Invalid JSON input. Please check the JSON format.');
  }
}