SQLAlchemy ORM Analysis


Summary

Given a list of JSON objects, I was tasked with displaying the relevant information on an HTML table filtering for specific values within the table. (In this case, I chose to filter by state and date/time)

First I created an HTML template that included a space wherein a table could be dynamically generated and altered following the press of a button. I added class="filter" to li tags containing my filter options. This made it easy to reference and understand at a glance.

On the javascript end, I used d3 to select the specific area of interest in the HTML doc, in this case, "tbody", where I would insert the body of my table by appending rows ("tr"). I used an event listener to wait for a button click on the submit button, and that would initialize a whatever functions were necessary to populate the table.

Solution


HTML


        <!DOCTYPE html>
        <html>
        
        <head>
        <meta charset="utf-8">
        <title>UFO Finder</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css">
        <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
        <link rel="stylesheet" href="static/css/style.css">
        </head>
        
        <body>
        <div class="wrapper">
        <nav class="navbar navbar-default">
        <div class="container-fluid">
        <div class="navbar-header">
        <a class="navbar-brand" href="index.html">UFO Sightings
        <img class="nav-ufo" src="static/images/ufo.svg">
        </a>
        </div>
        </div>
        </nav>
        <div class="hero text-center">
        <h1 class="text-light">UFO Sightings</h1>
        <p>The Truth is Out There</p>
        </div>
        <div class="container">
        <div class="row margin-top-50">
        <div class="col-md-2">
        <aside class="filters">
        <div class="panel panel-default">
        <div class="panel-heading text-center">Filter Search</div>
        <div class="panel-body">
        <form>
        <div class="form-group text-center">
        <ul class="list-group" id="filters">
        <li class="filter list-group-item">
        <label for="date">Enter a Date (between 1/1/2010 and 1/13/2010)</label>
        <input class="form-control text-center" id="datetime" type="text" placeholder="1/11/2011">
        </li>
        <li class="filter list-group-item">
        <label for="date">Enter a state acronym</label>
        <input class="form-control text-center" id="state" type="text" placeholder="ca">
        </li>
        </ul>
        </div>
        <button id="filter-btn" type="submit" class="btn btn-default center-block">Filter Table</button>
        </form>
        </div>
        </div>
        </aside>
        </div>
        <div class="col-md-10">
        <div id="table-area" class="">
        <table id="ufo-table" class="table table-striped">
        <thead>
        <tr>
        <th class="table-head">Date</th>
        <th class="table-head">City</th>
        <th class="table-head">State</th>
        <th class="table-head">Country</th>
        <th class="table-head">Shape</th>
        <th class="table-head">Duration</th>
        <th class="table-head">Comments</th>
        </tr>
        </thead>
        <tbody></tbody>
        </table>
        </div>
        </div>
        </div>
        </div>
        <footer class="footer">
        <span class="bottom">UFO Sightings</span>
        </footer>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
        <script src="static/js/data.js"></script>
        <script src="static/js/app.js"></script>
        <script src="static/js/app.js"></script>
        
        </body>
        
        
        
        
        </html>
      

Javascript



        tableData = data


        var tbody = d3.select("tbody");
        var row = tbody.append("tr");
        
        
        // Attach an event to listen for the form button
        
        
        // row.append("td").text(newGrade[i])
        // Actually, [i] will be the column-wise 2nd operator
        
        function react_to_button() {
        // Prevent the form from refreshing the page
            d3.event.preventDefault();
            var filtered_data = tableData;
            console.log("Your button is reacting");
            var date_input = d3.select("#datetime").property("value");
            var state_input = d3.select("#state").property("value");
            console.log(date_input);
            console.log(state_input);
            if (date_input) {
                filtered_data = filtered_data.filter(temporary_row => temporary_row.datetime === date_input);
            }
            console.log(filtered_data)
            if (state_input) {
                filtered_data = filtered_data.filter(temporary_row => temporary_row.state === state_input);
            }
            console.log(filtered_data);
            datapuller(filtered_data);
        };
        
        
        function datapuller(data) {
        
        // data.forEach(function(ufoReport) {
        //     console.log(ufoReport);
        //     var row = tbody.append("tr");
        //     Object.entries(ufoReport).forEach(function([key, value]) {
        //       console.log(key,value)
        //     })
        // });
        
        // First, clear out any existing data
            tbody.html("");
            console.log(data);
            data.forEach(function(ufoReport) {
            // console.log(ufoReport);
            var row = tbody.append("tr");
            Object.entries(ufoReport).forEach(function([key, value]) {
                // console.log(key, value);
                // Append a cell to the row for each value
                // in the weather report object
                var cell = tbody.append("td");
                cell.text(value);
            });
            });
        
        };
        
        console.log("Main Line");
        
        d3.selectAll("#filter-btn").on("click", react_to_button);
        
        
        datapuller(tableData);
        
        
        
        
        // function dateSelector(date) {
        //     return date.;
        //   }