CSV Import Not loading field data

CSV Import Not loading field data

davey.cawooddavey.cawood Posts: 11Questions: 2Answers: 0

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??

Answers

  • colincolin Posts: 9,207Questions: 0Answers: 1,538

    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.cawooddavey.cawood Posts: 11Questions: 2Answers: 0

    <html>
    <head>

    <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.cawooddavey.cawood Posts: 11Questions: 2Answers: 0
            $('#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.cawooddavey.cawood Posts: 11Questions: 2Answers: 0

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

  • davey.cawooddavey.cawood Posts: 11Questions: 2Answers: 0

    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

  • maraboumarabou Posts: 1Questions: 0Answers: 0

    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

  • colincolin Posts: 9,207Questions: 0Answers: 1,538

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

    Colin

Sign In or Register to comment.