I am stuck because there are no error messages. Most of the answers on stack overflow say I need to have script after the object is created. I believe I am already doing that. Please help me. I originally developed a functional prototype of this project on JSFiddle with jquery 2.01. I am now using the newest version of jquery which may be the issue. I am also trying to run this code in VS code. [![In the picture, there is a table. The slider is suppose to filter the table based on the date range. The slider should appear right under where it says time range.][1]][1] [1]: https://i.stack.imgur.com/PIBd7.png
enter code here
<!doctype html>
<html>
<head>
<!-- Library imports, javascript, css that are required to run your page in general -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
cursor: pointer;
color:#fff;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script
src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"
integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.js"></script>
</head>
<body>
<div id="time-range">
<p>Time Range: <span class="slider-time"></span> - <span class="slider-time2"></span>
</p>
<div class="sliders_step1">
<div id="slider-range"></div>
</div>
</div>
<! --- this creates the search function --->
<div class="row">
<div class="col">
<div class="card card-body">
<input id="search-input" class="form-control" type="text">
</div>
</div>
</div>
<table class="table table-striped">
<tr class="bg-info">
<th data-colname="date" data-order="desc">date ▲</th>
<th data-colname="exposed" data-order="desc">exposed (mn) ▲</th>
<th data-colname="displaced (k)" data-order="desc">displaced (k) ▲</th>
<th data-colname="killed" data-order="desc">killed ▲</th>
<th data-colname="duration(days)" data-order="desc">duration(days) ▲</th>
<th data-colname="cause" data-order="desc">cause ▲</th>
<th data-colname="Country Name" data-order="desc">Country Name ▲</th>
<th data-colname="ISO code" data-order="desc">ISO code ▲</th>
</tr>
<tbody id="myTable">Flood Table
</tbody>
</table>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var myArray =[{'date': '7/21/2007', 'exposed': 27712991, 'displaced (k)': 5000000, 'killed': 1071, 'duration(days)': 86, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/9/2010', 'exposed': 23137894, 'displaced (k)': 140000, 'killed': 0, 'duration(days)': 21, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/30/2008', 'exposed': 21631628, 'displaced (k)': 600000, 'killed': 0, 'duration(days)': 9, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/18/2008', 'exposed': 21529060, 'displaced (k)': 10000000, 'killed': 400, 'duration(days)': 37, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/12/2007', 'exposed': 21488636, 'displaced (k)': 11100000, 'killed': 96, 'duration(days)': 90, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '6/20/2004', 'exposed': 19855086, 'displaced (k)': 40000000, 'killed': 3000, 'duration(days)': 109, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '10/1/2010', 'exposed': 19362985, 'displaced (k)': 500000, 'killed': 15, 'duration(days)': 11, 'cause': 'Tropical StormSurge', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/25/2016', 'exposed': 18456496, 'displaced (k)': 25000, 'killed': 42, 'duration(days)': 32, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/1/2018', 'exposed': 17213562, 'displaced (k)': 1000, 'killed': 20, 'duration(days)': 6, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '6/11/2003', 'exposed': 16822143, 'displaced (k)': 9500000, 'killed': 600, 'duration(days)': 121, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/21/2002', 'exposed': 16541422, 'displaced (k)': 250000, 'killed': 380, 'duration(days)': 25, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/3/2007', 'exposed': 16486188, 'displaced (k)': 3000000, 'killed': 958, 'duration(days)': 81, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/16/2012', 'exposed': 15526445, 'displaced (k)': 200, 'killed': 45, 'duration(days)': 2, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/15/2011', 'exposed': 14830495, 'displaced (k)': 70000, 'killed': 158, 'duration(days)': 48, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/10/2017', 'exposed': 13271467, 'displaced (k)': 300000, 'killed': 117, 'duration(days)': 16, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/18/2010', 'exposed': 12414310, 'displaced (k)': 15000, 'killed': 88, 'duration(days)': 12, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/22/2008', 'exposed': 12372235, 'displaced (k)': 0, 'killed': 2400, 'duration(days)': 7, 'cause': 'Dam', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '10/7/2004', 'exposed': 11965543, 'displaced (k)': 100000, 'killed': 210, 'duration(days)': 11, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/20/2014', 'exposed': 11058729, 'displaced (k)': 500000, 'killed': 17, 'duration(days)': 19, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/22/2008', 'exposed': 8627859, 'displaced (k)': 13000, 'killed': 49, 'duration(days)': 7, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '10/12/2013', 'exposed': 8398628, 'displaced (k)': 0, 'killed': 7, 'duration(days)': 30, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/20/2008', 'exposed': 8360801, 'displaced (k)': 225000, 'killed': 142, 'duration(days)': 19, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/24/2014', 'exposed': 7868742, 'displaced (k)': 30000, 'killed': 59, 'duration(days)': 17, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/15/2015', 'exposed': 7756830, 'displaced (k)': 300000, 'killed': 206, 'duration(days)': 35, 'cause': 'Tropical StormSurge', 'Country Name': 'Nepal', 'ISO code': 'NPL'}]
function filterDates(list, dateMin, dateMax){
filteredList=[]
for(i=0;i<list.length;i++){
if(Date.parse(list[i]['date']) >= Date.parse(dateMin) &&
Date.parse(list[i]['date']) <= Date.parse(dateMax)) {
filteredList.push(list[i])
}
}
return filteredList
}
startDate="01/01/2008"
endDate="01/01/2015"
dateList=[]
function strip(array){
for (let i = 0; i < myArray.length; i++) {
console.log(myArray[i]['date'])
dateList.push(myArray[i]['date'])
}
}
strip(myArray)
console.log(dateList)
function findEarliestDate(dates){
if(dates.length == 0) return null;
var earliestDate = dates[0];
for(var i = 1; i < dates.length ; i++){
var currentDate = dates[i];
if(Date.parse(currentDate) < Date.parse(earliestDate)){
earliestDate = currentDate;
}
}
return earliestDate;
}
earliestDate=findEarliestDate(dateList)
console.log(earliestDate)
function findLatestDate(dates){
if(dates.length == 0) return null;
var latestDate = dates[0];
for(var i = 1; i < dates.length ; i++){
var currentDate = dates[i];
if(Date.parse(currentDate) > Date.parse(latestDate)){
latestDate = currentDate;
}
}
return latestDate;
}
latestDate=findLatestDate(dateList)
console.log(latestDate)
$('#search-input').on('keyup', function(){
var value=$(this).val()
console.log('Value:', value)
var data= searchTable(value,myArray)
buildTable(data)
})
/* This allows you to input texts in the search bar*/
buildTable(myArray)
function searchTable(value, data ){
var filteredData = []
for (var i=0;i<data.length;i++){
value=value.toLowerCase()
var cause=data[i].cause.toLowerCase()
if (cause.includes(value)){
filteredData.push(data[i])
}
}
return filteredData
}
/*this sorts the table*/
$('th').on('click', function(){
var column = $(this).data('colname')
var order = $(this).data('order')
var text = $(this).html()
text = text.substring(0, text.length - 1);
if (order == 'desc'){
myArray = myArray.sort((a, b) => a[column] > b[column] ? 1 : -1)
$(this).data("order","asc");
text += '▼'
}else{
myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
$(this).data("order","desc");
text += '▲'
}
$(this).html(text)
buildTable(myArray)
})
function buildTable(data){
var table = document.getElementById('myTable')
console.log(`this is table: ${table}`)
table.innerHTML = ''
for (var i = 0; i < data.length; i++){
var colname = `date-${i}`
var colname = `exposed-${i}`
var colname = `displaced (k)-${i}`
var colname = `killed-${i}`
var colname = `duration(days)-${i}`
var colname = `cause-${i}`
var colname = `Country Name-${i}`
var colname = `ISO code-${i}`
var row = `<tr>
<td>${data[i].date}</td>
<td>${data[i].exposed}</td>
<td>${data[i]['displaced (k)']}</td>
<td>${data[i].killed}</td>
<td>${data[i]['duration(days)']}</td>
<td>${data[i].cause}</td>
<td>${data[i]['Country Name']}</td>
<td>${data[i]['ISO code']}</td>
</tr>`
table.innerHTML += row
}
}
var dt_from = earliestDate;
var dt_to = latestDate;
var d_start= new Date(earliestDate);
var d_end= new Date(latestDate);
var difference = d_end.getTime()-d_start.getTime();
console.log(difference)
var date_range= (difference/86400)/1000
console.log(date_range)
$('.slider-time').html(dt_from);
$('.slider-time2').html(dt_to);
var min_val = Date.parse(dt_from)/1000;
var max_val = Date.parse(dt_to)/1000;
//the 1000 is the number of stoping point in days. Change this to be set by the range
function zeroPad(num, places) {
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}
function formatDT(__dt) {
var year = __dt.getFullYear();
var month = zeroPad(__dt.getMonth()+1, 2);
var date = zeroPad(__dt.getDate(), 2);
return year + '-' + month + '-' + date;
};
$("#slider-range").slider({
range: true,
min: min_val,
max: max_val,
step: 10,
values: [min_val, max_val],
slide: function (e, ui) {
var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
$('.slider-time').html(formatDT(dt_cur_from));
console.log((new Date(dt_cur_from.toDateString())).toLocaleDateString('en-US'))
var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
console.log((new Date(dt_cur_to.toDateString())).toLocaleDateString('en-US'))
//dt_cur_from and dt_cur_to are the sliders value saved
$('.slider-time2').html(formatDT(dt_cur_to));
startDate=(new Date(dt_cur_from.toDateString())).toLocaleDateString('en-US')
endDate=(new Date(dt_cur_to.toDateString())).toLocaleDateString('en-US')
filteredArray=filterDates(myArray,startDate,endDate)
buildTable(filteredArray)
}
});
/*this creates a filtered array by index*/
/*
var slicedArray=myArray.slice(myStart,myEnd)
console.log(slicedArray)
myArray=slicedArray
*/
/*console.log(Date.parse('7/21/2002'))
var d = new Date(1027209600000);
var newTime=new Date(d.toDateString());
console.log(newTime)
sortedDates=dateList.sort()
console.log(sortedDates)
*/
});
</script>
</body>
</html>