Save Plain JS Console Log or variable to CSV

Question

I need your expertise how can i save the console.log output or the variable in to a csv file ? please check my code below thank you!

jQuery('.result-row').each(function(index, value) {
    var name = jQuery(this).find('a.result-name span').text();
    var occupation = jQuery(this).find('span.result-suffix.result-suffix-verified').text();
    var occupationwospace = occupation.replace(/\s \s/g, '')
    console.log(name + '\t' + occupationwospace );
});

Code above gets the information and i need your help transffering it to csv — , Nov 03 '20 at 20:32
https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side — epascarello, Nov 03 '20 at 20:35
It makes a big difference whether you're trying to store the CSV on the user's device or on your server. You may be looking for the File API (see https://developer.mozilla.org/en-US/docs/Web/API/File). — Cat, Nov 03 '20 at 20:37

score 0 · Answer 1 · answered Nov 03 '20 at 20:47

One approach would be using the Blob object

let csv = ""; // CSV Content will be placed here

jQuery('.result-row').each(function(index, value) {

    let name = jQuery(this).find('a.result-name span').text();
    let occupation = jQuery(this).find('span.result-suffix.result-suffix-verified').text();
    let occupationwospace = occupation.replace(/\s \s/g, '')
    csv += name + '\t' + occupationwospace + '\n'; // Append to CSV String variable

});

const blob = new Blob([csv], {type: "text/csv;charset=utf-8"});
const blobUrl = URL.createObjectURL(blob);

// Create a link to download the file
const link = document.createElement("a");
link.href = blobUrl;
link.download = "data.csv";
link.innerHTML = "Click here to download the file";
document.body.appendChild(link);
// link.click(); // Auto download

joshmoto · Answer 2 · 2020-11-03T21:29:58.457

This is based on @epascarello comment link to other answer, pretty cool did not know this is possible. Though browser does block this as a popup first time round.

See demo below...

// set our csv content var
let csvContent = "data:text/csv;charset=utf-8,";

// create csv header row items
let csvHeader = ['Name','Occupation'];

// add csv header row to csv content
csvContent += csvHeader.join(",") + "\r\n";

// for each result row
$('.result-row','#results').each(function() {

    // start new csv row array var
    let csvRow = [];

    // set our csv row data
    csvRow[0] = $('[data-name]',this).data('name');
    csvRow[1] = $('[data-occupation]',this).data('occupation').replace(/\s \s/g, '');

    // log results for debugging
    console.log(csvRow);

    // add csv row to csv content
    csvContent += csvRow.join(",") + "\r\n";

});

// log results for debugging
console.log(csvContent);

// encode the csv content
let encodedUri = encodeURI(csvContent);

// open the csv file (this will be blocked here on stackoverflow)
window.open(encodedUri);

<div id="results">
    <div class="result-row">
        <div data-name="Bob">
            <a href="#">Bob</a>
        </div>
        <div data-occupation="Full Stack Developer">
            Full Stack Developer
        </div>
    </div>
    <div class="result-row">
        <div data-name="Nelly">
            <a href="#">Nelly</a>
        </div>
        <div data-occupation="User Experience">
            User Experience
        </div>
    </div>
    <div class="result-row">
        <div data-name="Beth">
            <a href="#">Beth</a>
        </div>
        <div data-occupation="Public Relations">
            Public Relations
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Save Plain JS Console Log or variable to CSV

2 Answers2