Merge pull request #676 from Nikunj-bisht/csv-to-json/tool

thinkswell · web-flow · commit c76c968ec490 · 2023-10-08T02:27:04.000+05:30
Added csv to json converter tool
diff --git a/CsvToJsonConverter/nikunj/README.md b/CsvToJsonConverter/nikunj/README.md
@@ -0,0 +1,23 @@
+
+## Project Information
+
+This is a small project in which a csv file of any size data is being converted into JSON format and all this task is being done in the worker thread not on the main thread you can look into the code for more details
+
+
+
+## Use
+- Open index.html with live server
+  
+- Select file by clicking on Choose file button and the result will be displayed in your page.Make sure the file is not corrupted
+
+
+### Tested Platform
+- chrome
+  
+- FireFox
+
+### Screenshot
+
+![Screenshot from 2023-10-06 03-26-25](https://github.com/Nikunj-bisht/javascript-projects/assets/52692588/f942b4ae-4393-4182-91f8-392b403ea931)
+
+  
diff --git a/CsvToJsonConverter/nikunj/fileWorker.js b/CsvToJsonConverter/nikunj/fileWorker.js
@@ -0,0 +1,24 @@
+onmessage = (mssg) => {
+  let f = mssg.data;
+  let fs = new FileReader();
+  fs.readAsBinaryString(f);
+  let jsonOutput = [];
+  let headers = [];
+  fs.onloadend = function (e) {
+    const rows = e.target.result.split("\r\n");
+    for (let i = 0; i < rows.length; i++) {
+      var cells = rows[i].split(",");
+      let obj = {};
+
+      for (let j = 0; j < cells.length; j++) {
+        if (i === 0) {
+          headers.push(cells[j]);
+        } else {
+          obj[headers[j]] = cells[j];
+        }
+      }
+      jsonOutput.push(obj);
+    }
+    postMessage(JSON.stringify(jsonOutput));
+  };
+};
diff --git a/CsvToJsonConverter/nikunj/index.html b/CsvToJsonConverter/nikunj/index.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <input type="file" id="fileP" />
+    <h1 id="rem"></h1>
+  </body>
+  <script src="./main.js"></script>
+</html>
diff --git a/CsvToJsonConverter/nikunj/main.js b/CsvToJsonConverter/nikunj/main.js
@@ -0,0 +1,11 @@
+const fileWorker = new Worker("fileWorker.js");
+fileWorker.onmessage = (mssg) => {
+  document.getElementById("rem").innerHTML = mssg.data;
+};
+document.getElementById("fileP").addEventListener("change", function () {
+  let re = new FileReader();
+  re.onload = function () {
+    fileWorker.postMessage(document.getElementById("fileP").files[0]);
+  };
+  re.readAsText(this.files[0]);
+});
