Angular date filter on ng-click - javascript

I want to filter the records by the reply time monthly. If I click a date on the left menu. The table should display the records only in that specific month. I have a search filter also.
The current reviews date are displayed on the left which serve as filter on ng-click. Is it possible for the dates in the left to be dynamic base on the reply time. the reply time is in the third column of the tabl which is a string date from JSON array.
My Script:
<script>
(function() {
'use strict';
angular
.module('myApp', [])
.constant('STATUS', {
0: 'Stable',
1: 'Normal',
2: 'Serious'
})
.controller('historyCtrl', historyCtrl);
historyCtrl.$inject = ['$scope', 'STATUS'];
function historyCtrl($scope, STATUS) {
$scope.sortType = 'sportorderreply.replyTime'; // set the default sort type
$scope.sortReverse = true; // set the default sort order
$scope.sortId = false;
$scope.sortRD = false;
$scope.sortRT = false;
$scope.sortStatus = false;
$scope.orderHistory = [{
"orderID":"123",
"purchaseTime":1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":1,
"replyTime":"2016/06/04 08:30:40"
}
},
{
"orderID":"123",
"purchaseTime": 1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":2,
"replyTime":"2016/08/04 08:30:40"
}
},
{
"orderID":"123",
"purchaseTime": 1437536718345,
"sportorderreply":{
"memberId":"123123",
"orderStatus":0,
"replyTime":"2016/07/04 08:30:40"
}
},
];
$scope.currentPage = 1;
$scope.currentYear = new Date().getFullYear();
$scope.search = function (order){
if ($scope.searchReview === undefined) return true;
if (order.sportorderreply.orderStatus.indexOf($scope.searchReview)!=-1 || order.purchaseTime.indexOf($scope.searchReview)!=-1 || order.sportorderreply.replyTime.indexOf($scope.searchReview)!=-1) {
return true;
}
return false;
};
function parseProperties() {
$scope.orderHistory.map(function(order) {
order.sportorderreply.orderStatus = STATUS[order.sportorderreply.orderStatus];
var date = new Date(order.purchaseTime);
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
var dateString = y + '/' + (m <= 9 ? '0' + m : m) + '/' + (d <= 9 ? '0' + d : d);
order.purchaseTime = dateString;
var newRT = new Date(order.sportorderreply.replyTime);
order.sportorderreply.replyTime = newRT;
return order;
});
}
parseProperties();
}})();
</script>
HTML:
<div id="accordion">
<h4 class="accordion-toggle activeAccordion"><p>Current reviews (120)</p></h4>
<div class="accordion-content default">
<ul ng-init="currentYear = {{currentYear}}">
<li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': currentYear} "> Dec. (50)</li>
<li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': currentYear} "> Nov. (50)</li>
<li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': currentYear} "> Oct. (50)</li>
<li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': currentYear} "> Sep. (50)</li>
<li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': currentYear} "> Aug. (50)</li>
<li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':currentYear}">Jul. (54)</li>
<li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':currentYear}">Jun. (30)</li>
<li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':currentYear}">May. (34)</li>
<li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':currentYear}">Apr. (20)</li>
<li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':currentYear}">Mar. (58)</li>
<li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':currentYear}">Feb. (59)</li>
<li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':currentYear}">Jan. (56)</li>
</ul>
</div>
<h4 class="accordion-toggle secondAcc"><p>2015 reviews (650)</p></h4>
<div class="accordion-content secondAcc">
<ul ng-init="lastYear = {{lastYear}}">
<li ng-click="monthFilter={'filterMonth':'December'};yearFilter={'filterYear': lastYear} "> Dec. (50)</li>
<li ng-click="monthFilter={'filterMonth':'November'};yearFilter={'filterYear': lastYear} "> Nov. (50)</li>
<li ng-click="monthFilter={'filterMonth':'October'};yearFilter={'filterYear': lastYear} "> Oct. (50)</li>
<li ng-click="monthFilter={'filterMonth':'September'};yearFilter={'filterYear': lastYear} "> Sep. (50)</li>
<li ng-click="monthFilter={'filterMonth':'August'};yearFilter={'filterYear': lastYear} "> Aug. (50)</li>
<li ng-click="monthFilter={'filterMonth':'July'};yearFilter={'filterYear':lastYear}">Jul. (54)</li>
<li ng-click="monthFilter={'filterMonth':'June'};yearFilter={'filterYear':lastYear}">Jun. (30)</li>
<li ng-click="monthFilter={'filterMonth':'May'};yearFilter={'filterYear':lastYear}">May. (34)</li>
<li ng-click="monthFilter={'filterMonth':'April'};yearFilter={'filterYear':lastYear}">Apr. (20)</li>
<li ng-click="monthFilter={'filterMonth':'March'};yearFilter={'filterYear':lastYear}">Mar. (58)</li>
<li ng-click="monthFilter={'filterMonth':'February'};yearFilter={'filterYear':lastYear}">Feb. (59)</li>
<li ng-click="monthFilter={'filterMonth':'January'};yearFilter={'filterYear':lastYear}">Jan. (56)</li>
</ul>
</div>
</div>
<body>
<div id="table-div-id-history" ng-app="myApp" ng-controller="historyCtrl">
<input type="text" id="livefilter-input" class="searchHistory" placeholder="Keyword" ng-model="searchReview">
<div class="divs" ng-repeat="order in orderHistory|orderBy:sortType:sortReverse| filter:search | filter:yearFilter | filter:monthFilter track by $index" >
<div >
<ul class="historyTableData">
<li><p class="table-data1-h">{{$index+1}}</li>
<li><p class="table-data2-h" ng-bind="order.purchaseTime"> </p></li>
<li><p class="table-data3-h">{{ order.sportorderreply.replyTime | date: 'yyyy/MM/dd, HH:mm'}}</p></li>
<li><p class="table-data4-h">XDCFG0006</p></li>
<li><p class="table-data5-h historyStatus" ng-bind="order.sportorderreply.orderStatus"></p></li>
<!--<li></li>-->
</ul>
</div>
</div>
</div>

Related

Using this JS function, how can I store in a SQL database TMDB fields?

I'm currently developing a project that will be Client on Java and Admin on PHP. For this purpose, I would like to store the API's data in a SQL database, so then I can show it in Java for the user to consume. The problem is, no matter how much I search, I can't find an answer that helps my specific issue. The solution that tends to be the best is to implement AJAX from a PHP form, the problem is I'm not trying to use POST for this.
Example of a function where I want information stored in database
function getMovie() {
let movieId = sessionStorage.getItem('id');
//test id -> 299536
axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=5ec279387e9aa9488ef4d00b22acc451`)
.then((response) => {
// https://api.themoviedb.org/3/movie/299536/reviews?api_key=5ec279387e9aa9488ef4d00b22acc451&language=en-US&page=1
console.log(response);
let movie = response.data;
if (movie.poster_path === null) {
poster = "../image/default-movie.png";
} else {
poster = "https://image.tmdb.org/t/p/w185_and_h278_bestv2" + movie.poster_path;
}
let date = movie.release_date;
let year = date.slice(0, 4);
let Rated;
let revenue = movie.revenue / 1000000;
let budget = movie.budget / 1000000;
revenue = Math.round(revenue);
budget = Math.round(budget);
if (revenue === 0) {
revenue = "Revenue is less than million dollers"
}
if (budget === 0) {
budget = "Budget is less than million dollers"
}
let genre = [];
movie.genres.forEach(element => {
genre.push(element.name);
});
genres = genre.join(' / ');
let output1 = `
<div class="row">
<div class="col-md-4 box1">
<img src="${poster}" class="poster-image">
</div>
<div class="col-md-4 box2">
<h1 class="movie-title">${movie.title}</h1>
<h5 style="color: white; font-weight:bold">${year}</h5>
<h5 style="color: white; font-weight:bold; margin-top: -10px;">${genres}</h5>
<ul class="list-group">
<li class="list-group-item active">
<strong>Rating: </strong> ${movie.vote_average} / 10</li>
<li class="list-group-item active">
<strong>Status: </strong> ${movie.status}</li>
<li class="list-group-item active">
<strong>Duration: </strong> ${movie.runtime} min</li>
<li class="list-group-item active">
<strong>Budget: </strong> $ ${budget} million</li>
<li class="list-group-item active">
<strong>Revenue: </strong> $ ${revenue} million</li>
</ul>
</div>
<div class="col-md-4 box3">
<h1 class="title-second">Synopsis</h1>
<p>${movie.overview}</p>
<hr style="width: 80%;color: #222;">
<div>
View IMDB
<!-- View IMDB -->
Go Back To Search
</div>
</div>
</div>
`
$('#movie').html(output1);
})
.catch((error) => {
console.log(error);
});
}
Thanks in advance!

angular 8 - Error trying to diff '[object Object]'. Only arrays and iterables are allowed

I want to display search results, but whenever i am trying to type anything to search box it shows error in console. i am fetching data from api and according to type i am displaying results in tabs.
data is getting filtered according to nav-tabs type.
but now i want to search listed data,
so whenever i am trying to search is shows error
TS -
searchKeywords: string;
CoffeeItemList: any = [];
// tslint:disable-next-line:max-line-length
constructor(private getDataListingService: DataListingService){}
ngOnInit() {
this.getGlobalSearchList('');
}
getGlobalSearchList(type: string) {
this.CoffeeItemList = [];
this.getDataListingService.getAllDataLists().subscribe(value => {
let data = [];
data = value.data;
console.log(data);
for (let i = 0; i < data.length - 1; i++) {
if (data[i].type === type) {
this.CoffeeItemList.push(data[i]);
}
}
});
}
getSmartSearchValues(search: string) {
if (search === '' ) {
this.getGlobalSearchList('');
return false;
}
this.getDataListingService.searchList(search).subscribe((data: any) => {
this.CoffeeItemList = data;
});
HTML
<div class="container">
<div class="mt-4">
<input class="form-control" type="text" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" placeholder="Search here"/>
</div>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Coffee')">Coffee</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Brewer')">Brewer</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="list" class="tab-pane container active in"><br>
<div class="row">
<div class="card col-3" *ngFor="let items of CoffeeItemList">
<div class="card-body">
<h5 class="card-title">{{items?.title }}</h5>
<img src="http://infogainpune.com{{items.image |slice:1}}" class="w-100"/>
<p class="card-text">{{items?.content}}</p>
<h4 class="card-text">${{items?.price}}</h4>
<h4 class="card-text">{{items?.type}}</h4>
</div>
</div>
</div>
</div>
</div>
</div>
The response of data
Try to change your code like this too see if it work for you
this.getDataListingService.getAllDataLists().subscribe(value => {
this.CoffeeItemList = value.data;
});
Let me know if you still have a problem.

jQuery count each item and number them 02, 03, 04 except first item text should be "Up Next"

I am not great with jQuery, so far this is what i got from checking through stackoverflow and other resources:
var counter = 1;
$('.next-page .nav-item').each(function () {
if ($(this, ':gt(0)')) {
$(this).find('.view-title').html('Up Next');
} else {
$(this).find('.view-title').html('0' + counter);
}
counter++;
});
Basically the output should end up like this in the html:
<div class="nav-item">
<span class="view-title">Up Next</span>
<span>Kits</span>
</div>
<div class="nav-item">
<span class="view-title">02</span>
<span>GUI</span>
</div>
<div class="nav-item">
<span class="view-title">03</span>
<span>UI</span>
</div>
<div class="nav-item">
<span class="view-title">04</span>
<span>Other</span>
</div>
Try like
$('.next-page .nav-item').each(function (i , val) {
$(this).find('.view-title').html(!i ? 'Up Next' : '0' + (i+1));
});

autocomplete search in ng-repeat in angularjs?

I my code i have 3 ng-repeats based on key press event value i am getting data from service and iam consuming
my html code is:
<div class="input-group" ng-controller="sidemenu">
<input class="form-control" placeholder="Enter location, builder or project" ng-model="NodeId_1" autofocus ng-keyup="getValue($event.keyCode)"/>
<div class="search-datalist" ng-if="showsearch">
<ul ng-if="resultOfBuldDet.length>0">
<span class="result-hd">Builders</span>
<li ng-repeat="bud in resultOfBuldDet" ng-class="{active :2}" ng-click="searchFilter(bud)"><i class="fa fa-map-marker"></i> {{bud.builders_name}}</li>
</ul>
<ul ng-if="resultOfPropDet.length>0">
<span class="result-hd">Properties</span>
<li ng-repeat="prop in resultOfPropDet" ng-click="searchFilter(prop)"><i class="fa fa-map-marker"></i> {{prop.property_name}} ,{{prop.hp_city.city_name}},{{prop.hp_location.location_name}} </li>
</ul>
<ul ng-if="resultOfCityDet.length>0">
<span class="result-hd">cities</span>
<li ng-repeat="city in resultOfCityDet" ng-click="searchFilter(city)"><i class="fa fa-map-marker"> </i> {{city.city_name}}</li>
</ul>
<ul ng-if="resultOfLocaDet.length>0">
<span class="result-hd">Location</span>
<li ng-repeat="loc in resultOfLocaDet" ng-click="searchFilter(loc)"><i class="fa fa-map-marker"></i> {{loc.location_name}},{{loc.hp_city.city_name}}</li>
</ul>
<ul ng-if="resultOfSubLocaDet.length>0">
<span class="result-hd">sub Location</span>
<li ng-repeat="subloc in resultOfSubLocaDet" ng-click=" searchFilter(subloc)"><i class="fa fa-map-marker"></i> {{subloc.sub_location_name}},{{subloc.hp_location.location_name}},{{subloc.hp_location.hp_city.city_name}}</li>
</ul>
</div>
</div>
my controller js code:
sidemenu.controller('sidemenu', ['$scope', '$rootScope', 'allServices'
function(a, b,e) {
a.getValue = function(key) {
if (key == 8 && a.NodeId_1.length <= 2) {
a.resultOfPropDet = "";
a.resultOfBuldDet = "";
a.resultOfLocaDet = "";
a.resultOfCityDet = "";
a.resultOfSubLocaDet = "";
}
if (a.NodeId_1.length > 2) {
e.searchList(a.NodeId_1).then(function(result) {
a.resultOfPropDet = result.data.resultOfPropDet;
a.resultOfBuldDet = result.data.resultOfBuldDet;
a.resultOfLocaDet = result.data.resultOfLocaDet;
a.resultOfCityDet = result.data.resultOfCityDet;
a.resultOfSubLocaDet = result.data.resultOfSubLocaDet;
a.showsearch = true;
}, function(error) {
});
}
}
});
so when i am moving up and down arrows in keyboard.how to highlight the particular rows and trigger the particular function
like this

Opening specific list in angular JS

I'm using the following code to try ng-repeat in angular. I need to show the list which I click. But when I click on the symbol ~, it is showing all the lists.
How can I specify such conditions when using ng-repeat?
HTML
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand()">~{{x}}
<ul ng-show='show'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>
Angular JS
<script>
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(){
$scope.show = !$scope.show;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
</script>
Pls check it out
var app = angular.module('myapp',[]);
app.controller('cntrl', function($scope){
$scope.names = ['Fruits', 'Veggies', 'Cars'];
$scope.show= false ;
$scope.features=[['Apple','Mango','Lemon','Grapes'], ['Tomato', 'Carrot', 'Cucumber'], ['Porsche', 'Aston', 'Dodge']];
$scope.expand=function(index){
$scope.expanded = ($scope.expanded != index)?index:-1;
}
$scope.add = function(){
$scope.span = false
if($scope.names.indexOf($scope.addy) === -1)
$scope.names.push($scope.addy);
else
$scope.span = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myapp' ng-controller='cntrl'>
<input ng-model="addy" />
<button ng-click="add()" class="w3-btn w3-padding w3-blue">Add</button>
<span ng-show='span' style='color:red'>The TeXt Is AlReAdY In ThE LiSt</span>
<ul class="w3-ul">
<li ng-repeat="x in names" class="w3-padding-hor-16">
<span ng-click="expand($index)">~{{x}}
<ul ng-show='expanded == $index'>
<li ng-repeat="Y in features[$index]">{{Y}}</li>
</ul>
</span>
</li>
</ul>
</div>

Categories

Resources