I am converting an array of JS object to CSV by using below code
downloadCSVFromJson(filename, arrayOfJson) {
// convert JSON to CSV
const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
const header = Object.keys(arrayOfJson[0]);
let csv = arrayOfJson.map(row => header.map(fieldName =>
JSON.stringify(row[fieldName], replacer)).join(','));
csv.unshift(header.join(','));
csv = csv.join('\r\n');
// Create link and download
var link = document.createElement('a');
link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv));
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
And it is working as expected now I need to do vice versa csv to an array of objects to do the same I am using below approach
handleUploadFinished() {
this.showSpinner = true;
[...this.template
.querySelector('input[type="file"]')
.files].forEach(async file => {
try {
const csv = await this.load(file);
console.log(csv);
} catch (e) {
console.log('Error in Parsing CSV ' + e);
}
});
}
async load(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function () {
resolve(reader.result);
};
reader.onerror = function () {
reject(reader.error);
};
reader.readAsText(file);
});
}
without changing anything in the csv if I try to read it using the above code then I get below JSON
"category,name,includeInAuto,srNumber,testType
"Test1","Name1","true",1,"type1"
"Test2","Name2","true",1,"type2"
"Test3","Name3","true",1,"type3"
"Test4","Name4","true",1,"type4"
"Test5","Name5","true",1,"type5"
"Test6","Name6","true",1,"type6"
"Test7","Name7","true",1,"type7"
but when I do changes in the CSV, file save it and then try to read it by using the same code above then I get whole ouput surrounded by double quotes as shown below
"category,name,includeInAuto,srNumber,testType
Test1,Name1,true,1,type1
Test2,Name2,true,2,type2
Test3,Name3,true,3,type3
Test4,Name4,true,4,type4
Test5,Name5,true,5,type5
Test6,Name6,true,6,type6
Test7,Name7,true,7,type7"
the problem is not just with the quotes coming or not but when I change name7 to name,7 then I get something like below
"category,name,includeInAuto,srNumber,testType
Test1,Name1,true,1,type1
Test2,Name2,true,2,type2
Test3,Name3,true,3,type3
Test4,Name4,true,4,type4
Test5,Name5,true,5,type5
Test6,Name6,true,6,type6
Test7,\"Name,7\",true,6,type6"
Above whole csv string is in double quotes but the name name, 7 is also in double quotes with some extra slashes now instead of 4 comma separated values we have 5 comma separated values which is incorrect
by spending some time on google I came across with this JS library called papaParse, if anyone has used this js library then please do let me know how can I use in LWC I am familiar till adding it as static resource and then importing in JS but not sure how to call method from this library.