Add files via upload

2024-04-05 18:02:54 +02:00 · 2024-04-05 18:02:54 +02:00 · 4c4db688c0
commit 4c4db688c0
1 changed files with 125 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Flatten JSON</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <h2>Upload JSON to Flatten</h2>
+  <input type="file" id="upload" accept=".json">
+  <button id="export-csv">Export as CSV</button>
+  <h3>Flattened JSON:</h3>
+  <pre id="output"></pre>
+
+  <script>
+    document.getElementById('upload').addEventListener('change', function (event) {
+      const fileName = event.target.files[0].name;
+      const fileReader = new FileReader();
+
+      fileReader.onload = function () {
+        try {
+          const json = JSON.parse(fileReader.result);
+          const flattenedJson = flattenJson(json);
+          document.getElementById('output').textContent = JSON.stringify(flattenedJson, null, 2);
+          const outputFileName = `${fileName.split('.')[0]}_flattened.csv`; // Dynamic output file name
+          document.getElementById('export-csv').setAttribute('download', outputFileName);
+        } catch (e) {
+          document.getElementById('output').textContent = 'Error parsing JSON: ' + e;
+        }
+      };
+      fileReader.readAsText(event.target.files[0]);
+    });
+
+
+    function flattenJson(obj) {
+      const result = [];
+
+      obj.forEach((item, index) => {
+        const flattenedItem = {};
+
+        function flatten(item, prefix = '') {
+          if (typeof item !== 'object' || item === null) {
+            flattenedItem[prefix] = item;
+            return;
+          }
+
+          for (const key in item) {
+            let newKey = prefix ? `${prefix}_${key}` : key;
+
+            if (Array.isArray(item[key])) {
+              item[key].forEach((subItem, subIndex) => {
+                flatten(subItem, `${newKey}_obj_${subIndex + 1}`);
+              });
+            } else if (typeof item[key] === 'object' && item[key] !== null) {
+              flatten(item[key], newKey);
+            } else {
+              flattenedItem[newKey] = item[key];
+            }
+          }
+        }
+
+        flatten(item);
+        result.push(flattenedItem);
+      });
+
+      return result;
+    }
+
+    // output
+    document.getElementById('export-csv').addEventListener('click', function () {
+      const flattenedJson = JSON.parse(document.getElementById('output').textContent);
+      const csvContent = convertJsonToCsv(flattenedJson);
+      const fileNameWithoutExtension = document.getElementById('upload').files[0].name.split('.')[0];
+      const outputFileName = `${fileNameWithoutExtension}_flattened.csv`;
+      downloadCsv(csvContent, outputFileName);
+    });
+
+
+    function validateCSV(json) {
+      for (const key in json) {
+        const value = json[key];
+        // check: commas, double quotes, line breaks
+        if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
+          // escape special chars
+          json[key] = `"${value.replace(/"/g, '""')}"`;
+        }
+      }
+    }
+
+    function convertJsonToCsv(json) {
+      const keys = Object.keys(json[0]);
+      const headerRow = keys.join(',') + '\n';
+
+      let dataRows = '';
+      json.forEach(obj => {
+        const values = keys.map(key => obj[key]);
+        dataRows += values.join(',') + '\n';
+      });
+
+      return headerRow + dataRows;
+    }
+
+    function downloadCsv(csvContent, fileName) {
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+      const link = document.createElement('a');
+      const url = URL.createObjectURL(blob);
+
+      link.setAttribute('href', url);
+      link.setAttribute('download', fileName);
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  </script>
+</body>
+
+</html>