Welcome folks today in this blog post we will be converting csv to array of json
objects using csv-to-array
library in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new node.js
project using the below command as shown below
npm init -y
npm i express
npm i csv-to-array
npm i multer
And after that you will see the below directory structure of the app is shown below
Basic Example
Now we will be seeing the basic example to convert the csv
file to array
of json objects
index.js
1 2 3 4 5 6 7 8 9 10 |
var columns = ["Name", "Age", "Country"]; require("csv-to-array")( { file: "users.csv", columns: columns, }, function (err, array) { console.log(err || array); } ); |
As you can see that in the above code we are importing the csv-to-array
library and then we are giving the headers
of the json
objects. And then we are giving the filename
of the csv file and passing the column names. And then we are showing the array of json
objects inside the command line.
First of all you can create the users.csv
file inside the root directory and copy paste the below code
This will produce the below result which contains the array of json
objects as shown below
Express App
Now we can transform this to an actual express
app by writing the below code inside the index.js
file as shown below
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
let express = require("express"); let bodyparser = require("body-parser"); let fs = require("fs"); let app = express(); let multer = require("multer"); app.use(bodyparser.urlencoded({ extended: false })); app.use(bodyparser.json()); app.use(express.static("public/uploads")); let storage = multer.diskStorage({ //multers disk storage settings destination: function (req, file, cb) { cb(null, "public/uploads"); }, filename: function (req, file, cb) { var datetimestamp = Date.now(); cb( null, file.fieldname + "-" + datetimestamp + "." + file.originalname.split(".")[file.originalname.split(".").length - 1] ); }, }); let upload = multer({ storage: storage, }); app.get("/", (req, res) => { res.sendFile(__dirname + "/index.html"); }); app.post("/convert", upload.single("file"), (req, res) => { var columns = ["Name", "Age", "Country"]; let outputfilename = Date.now() + "output.json"; require("csv-to-array")( { file: req.file.path, columns: columns, }, function (err, array) { console.log(err || array); // stringify JSON Object fs.writeFile(outputfilename, JSON.stringify(array), "utf8", function (err) { if (err) { console.log("An error occured while writing JSON Object to File."); return console.log(err); } console.log("JSON file has been saved."); res.download(outputfilename, () => {}); }); } ); }); app.listen(5000, () => { console.log("App is listening on port 5000"); }); |
As you can see we are loading the express
and the csv-to-array
library and then we are loading the index.html
file when the user goes to the /
route and then we are making a post
request to the /convert
route where we are getting the path
of the uploaded csv
file using the multer
library. For this you need to make the public/uploads
directory structure where we will be storing the files which is uploaded by the user. And then we will downloading the json
file as an attachment.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="/convert" method="post" enctype="multipart/form-data"> <input type="file" name="file" accept=".csv" required> <input type="submit" value="Download JSON File"> </form> </body> </html> |