papaparse - out of memory

montoyam

I have a project where I am using papaparse to import several csv files. On three datatables it is working just fine.I am bringing in over 3000 lines of data. However, I just added a new import and am getting an "out of memory" error on the browser. And the file is only 180 records of 3 small text fields. The data appears to be clean, a date followed by two fixed length text fields that all appear to be in order.

Part of my problem is I don't even understand how to start researching where the issue is because I don't understand where the papaparse magic is happening. It gets past the parsing part where it knows the fields and how many records. But after the second 'Submit', where is that code so I can add some console.logs or watch events?

$(document).ready(function () {
    drawDataTables();

    //https://editor.datatables.net/examples/extensions/import

    var editor;
    // Display an Editor form that allows the user to pick the CSV data to apply to each column
    function selectColumns(editor, csv, header) {
        var selectEditor = new $.fn.dataTable.Editor();
        var fields = editor.order();

        for (var i = 0; i < fields.length; i++) {
            var field = editor.field(fields[i]);
            selectEditor.add({
                label: field.label(),
                name: field.name(),
                //type: 'hidden',
                options: header,
                def: field.name(),

                //def: header[i]
            });
        }

        selectEditor.create({
            title: 'Read File',
            buttons: 'Import ' + csv.length + ' records'
            //, message: 'Select the CSV column you want to use the data from for each field.'
        });

        selectEditor.on('submitComplete', function (e, json, data, action) {
            // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
            editor.create(csv.length, {
                title: 'Confirm import',
                buttons: 'Submit'
                //,message: 'Click the <i>Submit</i> button to confirm the import of ' + csv.length + ' rows of data.'
            });

            for (var i = 0; i < fields.length; i++) {
                var field = editor.field(fields[i]);
                var mapped = data[field.name()];

                for (var j = 0; j < csv.length; j++) {
                    field.multiSet(j, csv[j][mapped]);
                }
            }

        });
    }
    


    function drawDataTables() {
        /**************************************************/

        var editor = new $.fn.dataTable.Editor({
            ajax: 'api/BANImport',
            table: '#BANImport',
            fields: [
                { label: "InvoiceDate:", name: "InvoiceDate" }, //, type: "hidden" },
                { label: "BAN:", name: "BAN" } , //, type: "hidden" },
                { label: "BTN:", name: "BTN" } //, type: "hidden" }
            ]
        });

        // Upload Editor - triggered from the import button. Used only for uploading a file to the browser
        var uploadEditor = new $.fn.dataTable.Editor({
            fields: [{
                label: 'CSV file:',
                name: 'csv',
                type: 'upload',
                ajax: function (files) {
                    // Ajax override of the upload so we can handle the file locally. Here we use Papa
                    // to parse the CSV.
                    Papa.parse(files[0], {
                        header: true,
                        skipEmptyLines: true,
                        //fastMode: true,
                        delimiter: ",",
                        complete: function (results) {
                            console.log("complete");
                            if (results.errors.length) {
                                console.log(results);
                                uploadEditor.field('csv').error('CSV parsing error: ' + results.errors[0].message);
                            }
                            else {
                                uploadEditor.close();
                                selectColumns(editor, results.data, results.meta.fields);
                            }
                        }
                    });
                }
            }]
        });

        var BANImportTable = $('#BANImport').DataTable({
            dom: 'Bfrtip',
            ajax: 'api/BANImport',
            columns: [
                { data: "InvoiceDate", title: "InvoiceDate" },
                { data: "BAN", title: "BAN" },
                { data: "BTN", title: "BTN" }
            ],
            select: true,
            autoWidth: false,
            //responsive: true,
            buttons: [
                {
                    text: 'Import CSV',
                    action: function () {
                        uploadEditor.create({
                            title: 'AT&T BAN Import'
                        });
                    }
                }
            ]
        });
        

        /**************************************************

        editor.on('preSubmit', function (e, data, action) {
            $.ajax({
                url: 'api/BANImport/Clear',
                type: 'post',
                success: function () {
                    CallManagerDataTable.ajax.reload();
                }
            });
        });

        /**************************************************/


    }

});

montoyam

ahh, I figured out where to look to start troubleshooting:

        selectEditor.on('submitComplete', function (e, json, data, action) {
            alert("got here 1");
            // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
            editor.create(csv.length, {
                title: 'Confirm import',
                buttons: 'Submit'
                //,message: 'Click the <i>Submit</i> button to confirm the import of ' + csv.length + ' rows of data.'
            });
            alert("got here 2");
            for (var i = 0; i < fields.length; i++) {
                console.log("loop", i);
                var field = editor.field(fields[i]);
                var mapped = data[field.name()];
                console.log("field", field, "mapped", mapped);
                debugger;
                for (var j = 0; j < csv.length; j++) {
                    console.log("loop2", j, "csv mapped", csv[j][mapped]);
                    field.multiSet(j, csv[j][mapped]);
                }
            }
            alert("got here 3");
        });

It appears the issue is my field names have spaces in the csv file but not the database.
So, in the csv it is called Invoice Date. In the sql table it is called InvoiceDate.

the question can be closed. thanks

colin

Excellent, glad all sorted,

Colin