Two Dimensional Array Export Into CSV, Data Not Showing in CSV, Javascript

Question

The csv file downloads properly but nothing is in it. I would like each new entry to be on a different row before being exported. Not sure why the data is not registering in the CSV, I get no errors at all on this. Thank you for any help. This is for a chrome extension.

var items = []
var rows = []

function myFunction() {
    items.push(document.getElementById('itemid').value);
    items.push(document.getElementById('itemid1').value);
    items.push(document.getElementById('itemid2').value);
    items.push(document.getElementById('itemid3').value);
    console.log(items);
    const arrayToMatrix = (array, columns) => Array(Math.ceil(array.length / columns)).fill('').reduce((acc, cur, index) => {
        return [...acc, [...array].splice(index * columns, columns)]
    }, []);
    const result = arrayToMatrix(items, 4);
    var rows = result;
    console.log(rows);}

document.getElementById('my-Function').onclick = myFunction;

function exportData() {
    let csvContent = "data:text/csv;charset=utf-8,";

    rows.forEach(function(rowArray) {
        let row = rowArray.join(",");
        csvContent += dataString + "\n";
    });
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "my_data.csv");
    document.body.appendChild(link);
    link.click();}

document.getElementById('export-Data').onclick = exportData;



Array after user input:

Array(4)
0: (4) ["ROW1", "ROW1", "ROW1", "ROW1"]
1: (4) ["ROW2", "ROW2", "ROW2", "ROW2"]
2: (4) ["ROW3", "ROW3", "ROW3", "ROW3"]
3: (4) ["ROW4", "ROW4", "ROW4", "ROW4"]

I have tried all of the different answers in the relevant post below but none seems to register my data in the csv:

JavaScript array to CSV

function exportData() {
    rows.forEach(function (infoArray, index) {
        var row = infoArray.join(",");
        rows.push(index == 0 ? "data:text/csv;charset=utf-8," + line : line);
    });
    var csvContent = rows.join("\n");
    var encodedUri = encodeURI(csvContent); ....

this one exports my html (popup.html) to the csv for some reason

and

How to export JavaScript array info to csv (on client side)?

function exportData() {
    var csvContent = '';
    rows.forEach(function(infoArray, index) {
        dataString = infoArray.join(';');
        csvContent += index < rows.length ? dataString + '\n' : dataString;
    });
    var encodedUri = encodeURI(csvContent);
});

this one exports my html (popup.html) to the csv for some reason also

I have also tried all of the other possible answers on those above questions. I appreciate any help! Thank you!!

Answer 1

This worked for me ultimately.

'use strict';

var items = []
var rows = []
var cols = []

function myFunction() {
    items.push(document.getElementById('itemid').value);
    items.push(document.getElementById('itemid1').value);
    items.push(document.getElementById('itemid2').value);
    items.push(document.getElementById('itemid3').value);
    console.log(items);
    const arrayToMatrix = (array, columns) => Array(Math.ceil(array.length / columns)).fill('').reduce((acc, cur, index) => {
        return [...acc, [...array].splice(index * columns, columns)]
    }, []);
    const result = arrayToMatrix(items, 7);
    rows = result;
    console.log(rows);}

document.getElementById('my-Function').onclick = myFunction;

function exportData() {
    cols.push(rows);
    console.log(cols);
    let csvContent = "data:text/csv;charset=utf-8," 
        + rows.map(e => e.join(",")).join("\n");

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "my_data.csv");
    document.body.appendChild(link);
    link.click();}

document.getElementById('export-Data').onclick = exportData;