JavaScript- Edit a CSV File using JS Last Updated : 19 Dec, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report If you want to edit a CSV file using JavaScript, you can use the following methods depending on your environment (browser or Node.js). 1. Editing CSV in the BrowserIf you're working with a CSV file in the browser, you can use JavaScript to manipulate the CSV data (after converting it into a readable format like an array of objects). Here's an example of how you can read, edit, and save a CSV file: HTML <!DOCTYPE html> <html lang="en"> <body> <input type="file" id="csvFile" accept=".csv" /> <button onclick="downloadCSV()">Download Edited CSV</button> <script src= "https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> <script> const fileInput = document.getElementById("csvFile"); fileInput.addEventListener("change", function (e) { const file = e.target.files[0]; if (file) { Papa.parse(file, { complete: function (results) { console.log(results); // Parsed CSV data const data = results.data; editCSV(data); // Edit the data }, header: true, // Assumes the CSV has headers }); } }); function editCSV(data) { // Example edit: Modify the value of the first row and first column data[0]["name"] = "New Name"; // Modify a field console.log("Edited Data:", data); } function downloadCSV() { // Convert the data back to CSV and download const csv = Papa.unparse(data); const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = "edited-file.csv"; link.click(); } </script> </body> </html> 2. Editing CSV in Node.jsIn a Node.js environment, you can use the fs (file system) module to read and write files and a library like PapaParse or csv-parser to handle CSV data.npm install papaparse JavaScript const fs = require("fs"); const Papa = require("papaparse"); // Read the CSV file fs.readFile("input.csv", "utf8", (err, data) => { if (err) { console.error("Error reading file:", err); return; } // Parse CSV data Papa.parse(data, { complete: function (results) { console.log("Parsed Data:", results.data); // Show parsed CSV data const editedData = editCSV(results.data); // Edit data // Convert back to CSV const csv = Papa.unparse(editedData); // Write edited data to a new CSV file fs.writeFile("edited-output.csv", csv, (err) => { if (err) { console.error("Error writing file:", err); } else { console.log("File successfully saved!"); } }); }, }); }); // Function to edit CSV data function editCSV(data) { // Example: Modify the name in the first row data[0]["name"] = "Updated Name"; // Modify a field return data; } 3. Using Other Libraries (Optional)The approach uses JavaScript's FileReader to read a CSV file selected by the user and PapaParse to convert the CSV data into an array of objects. Each object represents a row in the CSV, making the data easier to manipulate. This method is useful for client-side applications that allow users to upload and process CSV files directly in the browser.npm install csv-parser JavaScript const fs = require('fs'); const csv = require('csv-parser'); let results = []; fs.createReadStream('input.csv') .pipe(csv()) .on('data', (data) => results.push(data)) .on('end', () => { console.log(results); // Process the data and save back as CSV }); Comment More infoAdvertise with us Next Article How to create editable div using JavaScript ? M meetahaloyx4 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to create editable div using JavaScript ? In this article, we will be explaining to you how to create an editable div using HTML, CSS, and JavaScript. An editable div is one on which is you will click then it will generate an editable text area to edit or to write any text on your browser itself. After editing, when you click on somewhere e 3 min read Design a Survey Form using HTML CSS and JavaScript In this article, we are going to implement a survey form using HTML, CSS, and JavaScript. In this form, we will get data about the interest of people in sports. In this implementation, the data will be stored in a CSV file after successful form validations. Preview of final output: Let us have a loo 5 min read Create a Sortable and Filterable Table using JavaScript In this article, we will demonstrate how to create a sortable and filtrable table using JavaScript. This custom table will have the functionality of editing or removing individual items along with sorting and filtering items according to different fields. Also, a form is attached so that the user ca 6 min read How to export HTML table to CSV using JavaScript ? Comma Separated Values or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications.Sometimes while developing web applications, you may come into a scenario where you need to download a CSV file co 6 min read Explain about Read and Write of a file using JavaScript Handling file operations such as reading and writing is a common requirement in many JavaScript applications, especially on the server side using Node.js. This article explains how to perform these operations using Node.js's built-in fs (File System) module. The fs ModuleThe fs module provides an AP 3 min read JavaScript | JSON HTML HTML table: In the HTML, tables are defined by <table> tag, table's header are defined by <th> tag and by default table's header are placed in center and it is bold and row of the table is defined by <tr> and the data or information of the row is defined by <td> tag. Below co 3 min read Like