How to export data from javascript to csv file

for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);

addMarker(destinations[i], true);
outputDiv.innerHTML += origins[i] + ' to ' + destinations[i]
+ ': ' + results[i].distance.text + ' in '
+ results[i].duration.text + '<br>';

}

Do you have any idea how to implement something of that on my code?

Thanks

Reply

Kevin Shen -...

All-Star

16806 Points

2777 Posts

Microsoft

Re: How to export data from javascript to csv file

Aug 25, 2014 03:14 AM|Kevin Shen - MSFT|LINK

Hi nat06,

please refer to the code given from the link below:https://github.com/EliaContini/js-experiments/blob/master/exportToCSV/index.html

<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
    <meta charset="UTF-8" />
    <title>Export to CSV using JavaScript</title>
    <!--
        Author : Elia Contini <http://www.eliacontini.info>
        Created: 15 Mar 2014
        License: see LICENSE file in the repository root
    -->
</head>
<body>
    <script>
        // Here you can set your own data
        var data = [
            {
                "title": "Book title 1",
                "author": "Name1 Surname1"
            },
            {
                "title": "Book title 2",
                "author": "Name2 Surname2"
            },
            {
                "title": "Book title 3",
                "author": "Name3 Surname3"
            },
            {
                "title": "Book title 4",
                "author": "Name4 Surname4"
            }
        ];

        // prepare CSV data
        var csvData = new Array();
        csvData.push('"Book title","Author"');
        data.forEach(function (item, index, array) {
            csvData.push('"' + item.title + '","' + item.author + '"');
        });

        // download stuff
        var buffer = csvData.join("\n");
        var uri = "data:text/csv;charset=utf8," + encodeURIComponent(buffer);
        var fileName = "data.csv";

        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            link.setAttribute("href", uri);
            link.setAttribute("download", fileName);
        }
        else if (navigator.msSaveBlob) { // IE 10+
            link.addEventListener("click", function (event) {
                var blob = new Blob([buffer], {
                    "type": "text/csv;charset=utf-8;"
                });
                navigator.msSaveBlob(blob, fileName);
            }, false);
        }
        else {
            // it needs to implement server side export
            link.setAttribute("href", "http://www.example.com/export");
        }
        link.innerHTML = "Export to CSV";
        document.body.appendChild(link);
    </script>
</body>
</html>

Best Regards,

Kevin Shen.

Please Mark as Answer If it help you,thanks

Reply

nat06

Member

60 Points

547 Posts

Re: How to export data from javascript to csv file

Aug 25, 2014 04:20 PM|nat06|LINK

Hi Kevin,

I tried your example and here is what I have for the code:

 function callback(response, status) {
            if (status != google.maps.DistanceMatrixStatus.OK) {
                alert('Error was: ' + status);
            } else {
                var origins = response.originAddresses;
                var destinations = response.destinationAddresses;
                var outputDiv = document.getElementById('outputDiv');
                outputDiv.innerHTML = '';
                deleteOverlays();

                for (var i = 0; i < origins.length; i++) {
                   var results = response.rows[i].elements;
                    addMarker(origins[i], false);                    
                                        addMarker(destinations[i], true); 
                        outputDiv.innerHTML += origins[i] + ' to ' + destinations[i] 
                            + ': ' + results[i].distance.text + ' in '  
                            + results[i].duration.text + '<br>'; 

//I use the data that I write on the web site (in  outputDiv.innerHTML) to form csv file

                      //  csvData.push = ('"origins[i]", "destinations[i]", "results[i].distance.text", "results[i].duration.text"');                       
                 
                }
                var data = outputDiv.innerHTML;
                csvData.push = ('"origins", "destinations", "results.distance.text", "results.duration.text"');
                data.forEach(function (item, index, array) {
                    csvData.push('"' + item.origins + '","' + item.destinations + '","' + item.results.distance.text + '","' + results.duration.text + '"');
                });


            }
                   }

..
...
  google.maps.event.addDomListener(window, 'load', initialize);
        setInterval(function () { initialize(); calculateDistances(); exportCSV(); }, 20000);

            var buffer = csvData.join("\n");
            var uri = "data:text/csv;charset=utf8," + encodeURIComponent(buffer);
            var fileName = "data.csv";

            var link = document.createElement("a");
            if (link.download !== undefined) { 
              
                link.setAttribute("href", uri);
                link.setAttribute("download", fileName);
            }
            else if (navigator.msSaveBlob) { 
                link.addEventListener("click", function (event) {
                    var blob = new Blob([buffer], {
                        "type": "text/csv;charset=utf-8;"
                    });
                    navigator.msSaveBlob(blob, fileName);
                }, false);
            }
            else {
              
                link.setAttribute("href", "http://www.example.com/export");
            }
            link.innerHTML = "Export to CSV";
            document.body.appendChild(link);

but again the csv file remains empty

Reply

Kevin Shen -...

All-Star

16806 Points

2777 Posts

Microsoft

Re: How to export data from javascript to csv file

Aug 26, 2014 10:05 AM|Kevin Shen - MSFT|LINK

Hi nat06,

For your problem ,i suggest that you set a breakpoint on your javascript code check if your csvData has been filled with data.

And your problem is related with google map api,i recommend that you can post your question to their forum:

https://developers.google.com/maps/support/

Best Regards,

Kevin Shen.

Please Mark as Answer If it help you,thanks

Reply

nat06

Member

60 Points

547 Posts

Re: How to export data from javascript to csv file

Aug 27, 2014 09:14 AM|nat06|LINK

Thanks Kevin, but when putting breakpoint on

csvData.push = ('"origins", "destinations", "results.distance.text", "results.duration.text"');

I get a message:

The breakpoint will not currently be hit. No executable code of the debugger's target code type is associated to this line.

Reply

AidyF

All-Star

37441 Points

9076 Posts

Re: How to export data from javascript to csv file

Aug 27, 2014 09:31 AM|AidyF|LINK

msSaveBlob only works on IE. There are parts of html5 that do this

http://www.html5rocks.com/en/tutorials/file/filesystem/

but I don't think they are widely supported yet either. By far the best thing to do at the moment is submit the data to a webpage, have it create the file in-memory and stream it top the client for the browser to save. That is at least guaranteed to work on all browsers.

I'm afraid I no longer use this forum due to the new point allocation system.

How to export data from javascript to csv fileRSS

7 replies

Shortcuts