CSV Import Not loading field data

davey.cawood · January 2020

Hi there,
I have followed the csv import example but have an issue with the part " field.multiSet(j,csv[j][mapped])" as the csv import gets the headers from the csv to select but when the fields data/values are displayed, it just displays the number of csv rows minus one with for each field and does not display multiple values e.c.t wondering what be causing this issue??

colin · January 2020

I've not seen that. Could you link to your page so we can take a look, please, or if that's not possible, modify this test case.

Colin

davey.cawood · January 2020

<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=100%, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>Deliverables - Project Services</title>

<link rel="stylesheet" type="text/css" href="~/lib/DataTables/DataTables-1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/Buttons-1.6.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/Select-1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/ColReorder-1.5.2/css/colReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/RowReorder-1.2.6/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/KeyTable-2.5.1/css/keyTable.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/Editor-1.9.2/css/editor.dataTables.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/AutoFill-2.3.4/css/autoFill.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="~/lib/DataTables/AutoFill-2.3.4/css/autoFill.dataTables.min.css" />

<link rel="stylesheet" type="text/css" href="~/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="~/resources/demo.css">
<link rel="stylesheet" type="text/css" href="~/css/Table.css" />




<script type="text/javascript" src="~/lib/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript" language="javascript" src="~/lib/PapaParse-5.0.2/papaparse.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/AutoFill-2.3.4/js/autoFill.bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/AutoFill-2.3.4/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/AutoFill-2.3.4/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="~/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/Buttons-1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/Select-1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/Editor-1.9.2/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/ColReorder-1.5.2/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/RowReorder-1.2.6/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/pdfmake-0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/pdfmake-0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/Buttons-1.6.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/Buttons-1.6.1/js/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/Buttons-1.6.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" language="javascript" src="~/lib/DataTables/Buttons-1.6.1/js/buttons.print.min.js"></script>

<script type="text/javascript" language="javascript" src="~/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="~/resources/demo.js"></script>
<script type="text/javascript" language="javascript" src="~/resources/editor-demo.js"></script>
<script type="text/javascript" language="javascript" src="~/js/dataTables.editor.min.js"></script>

<script type="text/javascript" language="javascript" class="init">


    var editor;

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: 'select',
        options: header,
        def: header[i]
    } );
}

selectEditor.create({
    title: 'Map CSV fields',
    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. Optionally, override the value for a field to set a common value by clicking on the field below.'

    } );

    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]);

        }
    }
} );

}

    $(document).ready(function () {


        editor = new $.fn.dataTable.Editor({

            ajax: "/api/deliverables",
            table: "#example",

            fields: [
                { label: "Client Project Number:", name: "Deliverables.ClientProjectNumber" },
                { label: "Company Project Number:", name: "Deliverables.CompanyProjectNumber", type: "select" }
          ]

        });

        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,
                        complete: function (results) {
                            if (results.errors.length) {
                                console.log(results);
                                uploadEditor.field('csv').error('CSV parsing error: ' + results.errors[0].message);
                            }
                            else {
                                uploadEditor.close();
                                console.log(results);
                                selectColumns(editor, results.data, results.meta.fields);
                            }
                        }
                    });
                }
            }]
        });

        // Activate an inline edit on click of a table cell
        //   $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
        //        editor.inline(this);

davey.cawood · January 2020

        $('#example').DataTable({
            lengthMenu: [
                [10, 25, 50, -1],
                ['10 rows', '25 rows', '50 rows', 'Show all']
            ],
            //rowReorder: true,
            colReorder: true,
            //stateSave: true,
            scrollX: true,
                 stateSave: true,
            columnDefs: [
                { "visible": true, "targets": 0 },
                { "visible": true, "targets": 1 }




            ],
            dom: "Bfrtip",
            ajax: {
                url: '/api/deliverables',

            },
            order: [[1, 'asc']],
            columns: [



                { data: 'Deliverables.ClientProjectNumber' },
                { data: 'Deliverables.CompanyProjectNumber' }


            ],

            select: true,


            buttons: [
                { extend: "pageLength" },
                { extend: "colvis" },
                { extend: "create", editor: createNew },

                { extend: "edit", editor: createNew },
                {
                    text: 'Import CSV',
                    action: function () {
                        uploadEditor.create({
                            title: 'CSV file import'
                        });
                    }
                },
                { extend: "remove", editor: editor },
                {
                    extend: "selected",
                    text: 'Duplicate',
                    action: function (e, dt, node, config) {
                        // Start in edit mode, and then change to create
                        editor
                            .edit(table.rows({ selected: true }).indexes(), {
                                title: 'Duplicate record',
                                buttons: 'Create from existing'
                            })
                            .mode('create');
                    }
                },



                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                        'copy',
                        'excel',
                        'csv',
                        'print'
                    ]
                },
                {
                    extend: 'collection',
                    text: 'Export Current View',
                    buttons: [
                        {
                            extend: 'excel',
                            exportOptions: {
                                columns: ':visible',
                                header: ':visible:not(:last-child)'
                            }
                        },
                        {
                            extend: 'print',
                            exportOptions: {
                                columns: ':visible',
                                header: ':visible:not(:last-child)'
                            }
                        },
                        {
                            extend: 'csv',
                            exportOptions: {
                                columns: ':visible',
                                header: ':visible:not(:last-child)'
                            }
                        },
                        {
                            extend: 'copy',
                            exportOptions: {
                                columns: ':visible',
                                header: ':visible:not(:last-child)'
                            }
                        },

                    ]
                },

            ]
        });

    });



</script>

</head>
<body>
<h2>Deliverables Management</h2>

        <div>
            <table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Client Project Number</th>
                        <th>Company Project Number</th>


                    </tr>
                </thead>

            </table>
        </div>

</body>
</html>

davey.cawood · January 2020

I have narrowed the issue down and now believe it may be caused by the field name format containing the following "table.column"..

davey.cawood · January 2020

Sorry the issue caused by the "var mapped=data[field.name()]" as if I hard code a field name in the [] it will return the csv data for that field

marabou · June 2020

Did you find a solution for this? I am getting the same problem (it just displays the number of csv rows minus one with for each field on the confirmation dialog)...

I have modified the example to include two left joins..

Thanks

colin · June 2020

The solution was in the post preceding yours - it would be worth seeing if that applies to your situation,

Colin

charu_agarwal · October 2020

Hey @colin / @davey.cawood ,

Is that issue resolved? I am also facing the same issue. Can yu please help me with that?

colin · October 2020

See the last comment from @davey.cawood - that had the solution for his problem. If that doesn't work for you, can you link to your page, please.

Colin

davidjmorin · November 2020

@davey.cawood Can you post an example of your solution? I am aslo having this issue.

colin · November 2020

Feel free to post a test case of your example, or link to your page, and we can take a look,

Colin

CSV Import Not loading field data

CSV Import Not loading field data

Answers

Howdy, Stranger!

Categories

DataTables

CSV Import Not loading field data

CSV Import Not loading field data

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables