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.
<!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>
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.;
// }