I am currently using a combination of JavaScript and Angular to sort through my data. Initially, I attempted to filter the data by month and it worked as expected the first time. However, for some reason, it stopped functioning properly afterwards, causing the data table to disappear from the browser. I am looking for a way to ensure that the filter button consistently functions as it should.
Below are snippets of the files related to this issue:
----- Inside my `controller`
function CreateTableController($scope,$http, listsFactory){
listsFactory.getLists().then(function(response){
$scope.lists = response.data;
console.log($scope.lists);
}, function(error){
console.error(error);
});
$scope.filter = function(year, month) {
console.log('filtering');
$scope.unfilteredLists = $scope.lists;
$scope.lists = $scope.lists.filter((record) => {
console.log(record);
return record.date.includes(`${year}-${month}`);
});
};
----------- This is a section from my `html` files
<section class="filteringBymonth">
<input name="year" type="text" ng-model="date.year" >
<input name="month" type="text" ng-model="date.month" >
<button name="filter" ng-click="filter(date.year,
date.month)">Filter</button>
</section>
-------- Here is my `component` (similar to `.directive` but with improvements) and `factory` file, just in case
sampleApp.component('createDataTable',{
template: require('./create-data-table.html'),
controller: 'CreateTableController',
controllerAs:'createTableCtrl'
});
sampleApp.factory('listsFactory', function($q,$http){
return {
getLists: function(){
var deferred = $q.defer(),
httpPromise = $http.get('something.json');
httpPromise.then(function(response){
deferred.resolve(response);
}, function(error){
console.error(error);
});
return deferred.promise;
}
};
});
Thank you for your assistance!