Convert a multidimensional array to columns of a CSV file in JavaScript and save using a browser bookmarklet

Using Javascript run within a browser using a bookmarklet, my objective is to gather data from links on a web page, then put this into a formatted CSV for download. The tasks as I see them are:

I have done 1 and 2, giving me an array of arrays as columns for the table. I'm stuck on 3 and 4. Here's a sample of the data:

// test data for 'const' column (length of array will be variable)
var dataColumn = ["tt0468569", "tt0111161", "tt1795369", "tt7738450"];

// making arrays for other columns in export table (most of the other columns will be empty)
var emptyArray = Array(dataColumn.length).fill('')
var titleType = Array(dataColumn.length).fill('Feature Film')

// make array of arrays (columns) ready to export as csv
var dataTable = [emptyArray,dataColumn,emptyArray,emptyArray,emptyArray,emptyArray,titleType,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray];

// column headers for table
var tableHeaders = ["position","const","created","modified","description","Title","Title type","Directors","You rated","IMDb Rating","Runtime (mins)","Year","Genres","Num. Votes","Release Date (month/day/year)","URL"]


And my desired output:

position,const,created,modified,description,Title,Title type,Directors,You rated,IMDb Rating,Runtime (mins),Year,Genres,Num. Votes,Release Date (month/day/year),URL
,tt0468569,,,,,Feature Film,,,,,,,,,
,tt0111161,,,,,Feature Film,,,,,,,,,
,tt1795369,,,,,Feature Film,,,,,,,,,
,tt7738450,,,,,Feature Film,,,,,,,,,


2 Answers
2

You are almost done on creating the array, just need to change the approach for creating the tableData. Instead of appending the tableData with a set of arrays as empty array and title array you need to map them accordingly.

tableData

tableData

empty array

title array

Take a look at the snippet below:

function downloadExcel()
var dataColumn = ["tt0468569", "tt0111161", "tt1795369", "tt7738450"];
var tableHeaders = ["position", "const", "created", "modified", "description", "Title", "Title type", "Directors", "You rated", "IMDb Rating", "Runtime (mins)", "Year", "Genres", "Num. Votes", "Release Date (month/day/year)", "URL"];

//now a container for the excel data i.e. tableHeaders+datacreated:
var dataTable = new Array();
dataTable.push(tableHeaders);

//now looping around the data
dataColumn.forEach(function(col)
dataTable.push(['', col, '', '', '', '', 'Feature Film', '', '', '', '', '', '', '', '', '']);
);

//now converting the array given into a `csv` content
let csvContent = "data:text/csv;charset=utf-8,";
dataTable.forEach(function(rowArray)
let row = rowArray.join(",");
csvContent += row + "rn";
);

//calling the csv download via anchor tag(link) so we can provide a name for the file
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.style.display = 'none';
link.setAttribute("download", "myCSV.csv"); //change it to give your own name
link.innerHTML = "Click Here to download";
document.body.appendChild(link); // Required for FF

link.click();
link.remove(); //removing the link after the download


<button onclick="downloadExcel()">Click me to Download excel</button>

csv

IIFE

javascript:(function() the code goes here )();

One way is - Formatting should just be outputting all the individual lines (TableHeader + all your datatable lines) into an array, then joining the array into 1 long string with an 'end of line' symbol(which may or may not happen automatically, you might need to play with this). Then you put that resultant string into a link/button on your page.

so something along the lines of:

var OutString = ;
// your existing code here for defining the headers
OutString[0] = TableHeader
for (var i = 1; i < LineCount; ++i) // looping mechanism through pickup from the page
// your existing code here for picking up the details
OutString[i] = dataTable

TestFunc += OutString.join(''); // or whatever you want your end of line to be
OutPutLine = '<a href="data:text/plain;charset=UTF-8, ' + encodeURIComponent(TestFunc) + '" download="' + decodeURIComponent(escape('your file name here')) +'">optional button etc here</a>';


Then write OutPutLine to your page element.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.