Converting CSV to JSON using JavaScript

Hello developers, in this post am going to share with you how to convert a csv file to JSON using JavaScript and Vuejs component. Let’s get started

Below is the data that is in my CSV file, this is the data that is in the file which will be uploaded.

csv data

Okay, since we have our csv file, let’s start coding

Step 1: Create an input component in Vuejs

vue input componet

Step 2: Create a function that will handle the conversion

Step 3: Declare a variable that will be used to access the file

Step 4: Declare variables that will be used in the changeToJSON function

Step 5: Import the JavaScript File reader, this will help read data from a blob. According to JAVASCRIPT.INFo , FileReader is an object with the sole purpose of reading data from Blob objects.

After the reader is assigned to the new instance we use it to read the data coming from the csv file

Step 6: the readAsBinaryString function is responsible for fetching the csv file being uploaded.

Step 7: Declare the onload function and its variables.

The onload function is property contains an event handler executed when the load event is fired.

Variables to be declared in the onload function

  1. initializing a csv to the result array

2. The lines variable will splits the csv into rows

3. The headers variable will get data in the csv file starting on row 2 and consider them as headers.

4. create a for loop to loop through the csv function, assigning the value to row 3 where values are for each column header.

Variables in the for loop

i. The if checks if the row is not empty then it continues

ii. object to receive the headers and the values

iii. current row during looping is stored in this variable

iv. the regular expression removes unwanted (“) quotes from the string

v. replacing regex value with empty string

vi. Splits current row into Individual values after every comma

5. Create an inner for loop to match headers and related values from the CSV file and place it into object. The trim() function in this loop is used to remove any unwanted spaces in the cells of our CSV file.

6. Add the object created to array result. This will push the object received into an array

7. After coming out from the parent for loop, you need to convert the data received in a result array to the JSON string , like in the snippet below

8. When you console the result array you expect to see the values below

converted CSV data to JSON

The whole JavaScript code is in the snippet below

That’s how you convert a CSV file to JSON using JavaScript. Hope this helps, if it does, don’t forget to clap. For other references you can visit Techslides. Happy codding.




Wife, Software Developer and love learning

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Mapping StackOverflow into real-time assistance

Writing a front-end WebAssembly framework in Rust: lessons learned

Weird JavaScript things

Optimizing my JavaScript Canvas Game Pt 1

Test Essay (Not scheduled)

Javascript 10 Question for Interview.

Create one exe file from Java Swing Application with several jar files.

JavaScript Features Every Developer Should Know

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Salifyanji Taala

Salifyanji Taala

Wife, Software Developer and love learning

More from Medium

Vuex — State Management

Javascript history

Basic state management Vue

Vue.js #5: Components