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.
Okay, since we have our csv file, let’s start coding
Step 1: Create an input component in Vuejs
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
- 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
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.
