Read CSV File In React

Question

I'm uploading and then reading the CSV file but I'm facing an issue while splitting it, so basically, column names in CSV contain ',' so when I'm going to split the columns with ',' so I don't get the full column value, please suggest me some proper way for it. Thanks

const readCsv = (file) => {
 const reader = new FileReader();
 const filetext = reader.readAsBinaryString(file);
 reader.addEventListener('load', function (e) {
 const data = e.target.result;
 let parsedata = [];
 let newLinebrk = data.split('\n');
 for (let i = 0; i < newLinebrk.length; i++) {
 parsedata.push(newLinebrk[i].split(','));
 }
 console.log("parsedData: ", parsedata);
 });
};

CSV:

column 1 column2 
test lorem, ipsum, dummy/text

after splitting:

['test', 'lorem', 'ipsum', 'dummy/text']

so by doing that I'm unable to get a proper column name that contains a comma in string.

• jsN00b: May I know if exploring existing solutions, such as csv-reader, can be considered? Also, is it okay to consider changing the delimiter to some other character (may be ^ or ~) instead of comma?
• Zain Khan: @jsN00b don't wanna use any 3rd party library
• jsN00b: Issue is that within the code, how does one differentiate which comma is the delimiter (indicating end of a column) and which comma is part of the cell (text)?
• Zain Khan: yes, that is my question :)
• Zain Khan: @jsN00b can you share an example in react with csv-reader?

Answer 1

In my case, I used Papa Parse which fulfills my all requirements.

const readCsv = (file) => {
 const reader = new FileReader();
 reader.readAsBinaryString(file);
 reader.addEventListener('load', function (e) {
 const data = e.target.result;
 Papaparse.parse(data, {
 complete: function (results) {
 console.log("results: ", results.data);
 },
 });
 });
};