Saving the content of data into csv - AngularJS

Question

Hi I'm trying to save the content of data which came from my webserver into csv file.

I'm trying this code which came from various question here in stackoverflow.

.success(function(data, status, headers, config) {
    console.log(data);
    if (data.success) {
        console.log(data);
        var saving = document.createElement('a');

        saving.href = 'data:attachment/csv,' + encodeURIComponent(data);
        saving.download = 'Summary.csv';
        saving.click();
    }
})
.error(function(data, status, headers, config) {
    console.log('error in downloading!');

});

But the content of data doesn't save into my summary.csv and gave me this [object object]. Can someone help me with this?

What does the console show is the format of data? Can you post an example? At the very least, is it an array or an object? — GregL
– GregL, Commented Nov 27, 2014 at 6:06
hi @GregL , it gave me this: Object {result: Array[218], success: true} — akbsmile
– akbsmile, Commented Nov 27, 2014 at 6:15

GregL · Accepted Answer · 2014-11-27 06:19:20Z

The first problem is that encodeURIComponent() requires a string, and you are giving it an object, so it calls .toString() on it, which is why you get [object Object].

Instead, you need to convert your data array into a CSV string yourself. If you are using D3.js you can use d3.csv.format(rows), which is very nice. Or you can find another JS CSV library. Or you can use the following very simplistic implementation I just wrote for you:

function csv(arr) {
    var ret = [];
    ret.push('"' + Object.keys(arr[0]).join('","') + '"');
    for (var i = 0, len = arr.length; i < len; i++) {
        var line = [];
        for (var key in arr[i]) {
            if (arr[i].hasOwnProperty(key)) {
                line.push('"' + arr[i][key] + '"');
            }
        }
        ret.push(line.join(','));
    }
    return ret.join('\n');
}

NB: This function assumes you pass it a valid array with at least one element, and all the elements are objects with exactly the same keys. If none of these assumptions are true for you, either extend my function or use a more robust third party library.

So, putting this all together, your final code would be:

.success(function(data, status, headers, config) {
    console.log(data);
    if (data.success) {
        console.log(data);
        var saving = document.createElement('a');

        saving.href = 'data:attachment/csv,' + encodeURIComponent(csv(data.results));
        saving.download = 'Summary.csv';
        saving.click();
    }
})
.error(function(data, status, headers, config) {
    console.log('error in downloading!');
});

Note that I needed to access data.results to get the actual array of results. And I am assuming you will use my csv() function or another similar one to convert the array into a CSV string.

David Sajdl · Accepted Answer · 2016-01-05 17:11:03Z

1

add append the saving to work in firefox!!

... // as is written
saving.download = 'Summary.csv';
document.body.appendChild(saving);
saving.click();

answered Jan 5, 2016 at 17:11

David Sajdl

1742 silver badges10 bronze badges

Comments

Oswald · Accepted Answer · 2021-06-29 02:59:43Z

0

Use ng-csv

<button type="button" ng-csv="ExportCsv()" filename="ExportCsv.csv" csv-header="['a','b']" charset="utf-8">CSV</button>
$scope.ExportCsv= async function(){
  const msg = await getdata();
  return msg;
}
var getdata =  function abc(a,b) {
  return new Promise(resolve => {
    $http.get(// use backend)
          .success(function (data, status, headers, config) {
             $scope.datacsv =[];angular.forEach($scope.dt, function (value,key) {
             $scope.datacsv.push({"a":value.a,"b":value.b});
                           
          });
                
      })
    setTimeout(() => {
                    resolve($scope.datacsv);
    }, 2000);
  });
}

edited Jun 29, 2021 at 2:59

Oswald

1,27020 silver badges32 bronze badges

answered Jun 28, 2021 at 7:17

sree vadhsun

1

Collectives™ on Stack Overflow

Saving the content of data into csv - AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related