Download/Save CSV file - PapaParse

webDev picture webDev · Sep 9, 2018 · Viewed 9.7k times · Source

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:

enter image description here

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. enter image description here

Answer

Bharata picture Bharata · Sep 12, 2018

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.