PROBLEM:
Downloaded CSV file is blank (unparse()
method to conver array/JSON to CSV).
DETAIL:
Papaparse is working fine when parse CSV file to JavaScript array. But when I feed that array data or JSON data to unparse()
method, its not working.
Angular JS method:
$scope.downloadCSV = function(){
var csv = Papa.unparse($scope.final_array);
console.log($scope.final_array);
console.log(csv);
var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
var csvURL = null;
if (navigator.msSaveBlob) {
csvURL = navigator.msSaveBlob(csvData, 'download.csv');
} else {
csvURL = window.URL.createObjectURL(csvData);
}
var tempLink = document.createElement('a');
tempLink.href = csvURL;
tempLink.setAttribute('download', 'download.csv');
tempLink.click();
}
$scope.final_array
contains data as:
On above code, console.log(csv);
displays blank on the console.
In short: var csv = Papa.unparse($scope.final_array);
is not working.
UPDATE
The posted array help me to generate following table and the button "Save Generated CSV" is not working and the code posted is for the this action button.
You are trying to unparse an array of arrays which is just plain data without the column names.
To use the column names you might want to use the array of objects version. Rewrite your final_array
as:
$scope.final_array = [
{ question1: "A", question2: "A", question3: "mike" },
{ question1: "A B", question2: "B", question3: "dan" },
];
Alternatively you can separate your column names and the data in a single object as follows:
$scope.final_object = {
fields: [ "question1", "question2", "question3" ],
data: [
[ "A", "A", "mike" ],
[ "A B", "B", "dan", ],
],
};
If you need to convert $scope.final_array
maybe the following snippet will help you:
function convertFinal(arrOfArr) {
return arrOfArr.map(function(arr) {
var obj = {};
for(var key in arr) {
if(arr.hasOwnProperty(key)) {
obj[key] = arr[key];
}
}
return obj;
});
}
var csv = Papa.unparse(convertFinal($scope.final_array));
Your mistake: if we view your console screenshot we will see that you have some mishmash in your array code from arrays and objects. In your code you have some like this:
var array =
[
[question1: "A", question2: "A"],
[question1: "A B", question2: "B"]
];
But it is incorrect and must to be some like this:
var array =
[
{question1: "A", question2: "A"},
{question1: "A B", question2: "B"}
];
You have to correct it.
Working example
See this Codepen demo because StackOverflow snippets are in sandbox and because of this do not work.
var array =
[
{
question1: "А",
question2: "А",
question3: "mike",
question1_A: "TRUE",
question1_B: "FALSE",
question1_C: "FALSE",
question1_D: "FALSE"
},
{
question1: "A В",
question2: "В",
question3: "dan",
question1_A: "TRUE",
question1_B: "TRUE",
question1_C: "FALSE",
question1_D: "FALSE"
},
{
question1: "B C D",
question2: "А В С",
question3: "tango",
question1_A: "FALSE",
question1_B: "TRUE",
question1_C: "TRUE",
question1_D: "TRUE"
},
{
question1: "A D",
question2: "С",
question3: "charlie",
question1_A: "TRUE",
question1_B: "FALSE",
question1_C: "FALSE",
question1_D: "TRUE"
},
{
question1: "В",
question2: "А",
question3: "bob",
question1_A: "FALSE",
question1_B: "TRUE",
question1_C: "FALSE",
question1_D: "FALSE"
},
{
question1: "C D",
question2: "А",
question3: "john",
question1_A: "FALSE",
question1_B: "FALSE",
question1_C: "FALSE",
question1_D: "FALSE"
}
];
function downloadCSV()
{
var csv = Papa.unparse(array);
var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
var csvURL = null;
if (navigator.msSaveBlob)
{
csvURL = navigator.msSaveBlob(csvData, 'download.csv');
}
else
{
csvURL = window.URL.createObjectURL(csvData);
}
var tempLink = document.createElement('a');
tempLink.href = csvURL;
tempLink.setAttribute('download', 'download.csv');
tempLink.click();
}
<script src="https://www.papaparse.com/resources/js/papaparse.js"></script>
<input type="button" value="download CSV" onclick="downloadCSV()">
For further information see the documentation from Papa's unparse
function.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With