Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Download/Save CSV file - PapaParse

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

like image 681
BetaDev Avatar asked Sep 08 '18 23:09

BetaDev


2 Answers

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));
like image 126
BeyelerStudios Avatar answered Oct 30 '22 22:10

BeyelerStudios


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.

like image 29
Bharata Avatar answered Oct 30 '22 21:10

Bharata