3

I've tried all day to populate a table dynamically. The purpose for the application is to load a CSV-file and parse it to JSON using Papaparse (great CSV to JSON framework) and then populate a table with this JSON-data, using DynaTable.js. I may be blind with my own code and I would greatly appreciate some input on how to do this. :)

This is my code so far (do not mind the clutter, I am going to clean it up after the main function is in place).

<!DOCTYPE html>
<html>
    <head>
        <title>CSV Parser</title> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, maximum-scale=1.0">
        <meta name="theme-color" content="#ffffff">

        <link rel="stylesheet" href="styles/bootstrap.min.css">
        <link rel="stylesheet" href="styles/filedrop.css">

        <script src="scripts/jquery-2.1.4.min.js"></script>
        <script src="scripts/bootstrap.min.js"></script>
        <script src="scripts/papaparse.min.js"></script>
        <script src="scripts/jquery.dynatable.js"></script>
        <script>
            var data;

            function handleFileSelect(evt) {
                var file = evt.target.files[0];

                Papa.parse(file, {
                    header: true,
                    dynamicTyping: true,
                    complete: function (results) {
                        data = results;
                        localStorage.setItem('dataStuff', JSON.stringify(data));
                    }
                });
            }

            $(document).ready(function () {
                $("#csv-file").change(handleFileSelect);
            });
        </script>
    </head>
    <body>
        <main>
            <header>
                <div class="jumbotron">
                    <div class="container">
                        <p>CSV Parser</p>
                    </div>
                </div>
            </header>
            <h1>Load CSV-file</h1>
            <input type="file" id="csv-file" name="files" />

            <table id="my-table">
                <thead>
                    <tr>
                        <th>Phone Number</th>
                        <th>Email Address</th>
                        <th>Binding End Date</th>
                        <th>Terminal Vendor</th>
                        <th>Terminal Billeba</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <script>
                $.getJSON('dataStuff', function (response) {
                    $('#my-table').dynatable({
                        dataset: {
                            records: response
                        },
                    });
                });
            </script>
        </main>
    </body>
    <footer>
    </footer>
</html>
Ash
  • 2,108
  • 2
  • 17
  • 22
Gaute
  • 107
  • 1
  • 1
  • 12
  • From the looks I would say your $.getJSON is executed when the page is loaded and not when an actual file is selected and was parsed. – Danmoreng Oct 20 '15 at 14:09
  • Yeah, I think you should tie your $.getJSON to complete callback in handleFileSelect. – Juuso Palander Oct 20 '15 at 14:17
  • Thought so too, but Dynatable.js must be called after the -tag, right? This may be a dumb question, but how do I push the data to the table after running the handleFileSelect function? Do you have an example? @JuusoPalander
     – Gaute Oct 20 '15 at 14:43
  • Do you mean the positioning of – Juuso Palander Oct 20 '15 at 14:51
  • @JuusoPalander Thanks, I will try that :) – Gaute Oct 20 '15 at 17:39

1 Answers1

0

Have you tried placing the data population code on the complete callback of Papa.parse? Like this:

Papa.parse(file, {
    header: true,
    dynamicTyping: true,
    complete: function (results) {
        data = results;
        localStorage.setItem('dataStuff', JSON.stringify(data));

        $('#my-table').dynatable({
            dataset: {
                records: results
            }
        });
    }
});
dunli
  • 1,356
  • 9
  • 18