JavaScript- Edit a CSV File using JS

Last Updated : 19 Dec, 2024

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 Browser

If 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.js

In 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
  });

How to create editable div using JavaScript ?

meetahaloyx4

Improve

Article Tags :

JavaScript- Edit a CSV File using JS

1. Editing CSV in the Browser

2. Editing CSV in Node.js

3. Using Other Libraries (Optional)

Similar Reads

Thank You!

What kind of Experience do you want to share?