We Keep Coding

Getting highest score values from firebase database

In my website there are some films that i get from firebase. The scores of the movies are between 0 and 100. I already got all the movies in my website. I also want to display them in descending order.(for ex. top 5 rated movies) How can i achieve this? Thanks for your answers.
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth(app);
const firebaseRef= ref(getDatabase());
var body = document.getElementById('movies');
var body2 = document.getElementById('series');
function AddItemsToTable(name, score, img, id) {
var movies = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body.innerHTML+=movies;
}
function AddItemsToTable2(name, score, img, id) {
var series = `<div class="content"><img src="${img}" ><p>${name}</p> <p> <i class="fa fa-star checked" id="star2${id}"></i> <a class="scoretxt">${score}%</a> </p> </div>`;
body2.innerHTML += series;
}
//*******************************I got the movies************************************************
function AddAllItemsToTable(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
//************************I got tv series*********************************************
function AddAllItemsToTable2(TheSeries){
var counter=0;
TheSeries.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable2(element.seriesName, element.seriesScore, element.seriesImage, element.seriesId);
counter++;
});
}
function AddAllItemsToTable3(TheMovies){
var counter=0;
TheMovies.forEach(element => {
if (counter===6) {
return;
}
AddItemsToTable3(element.movieName, element.movieScore, element.movieImage, element.movieId);
counter++;
});
}
function getAllDataOnce(){
const dbRef=ref(db);
get(child(dbRef,"Movies"))
.then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
AddAllItemsToTable(movies);
});
}
function getAllDataOnce2(){
const dbRef=ref(db);
get(child(dbRef,"Series"))
.then((snapshot)=>{
var series=[];
snapshot.forEach(childSnapshot => {
series.push(childSnapshot.val())
});
AddAllItemsToTable2(series);
});
}
window.onload = (event) => {
getAllDataOnce();
getAllDataOnce2();
};
<div class="grid-container">
<header class="header">
<div class="solheader">
<img src="img/sonlogo3.png" alt="logo">
<img src="img/logosmall.png" alt="logo" style="width:60px;height:48px;margin:5px;">
</div>
<div class="ortaheader">
<input type="text" placeholder="Movies or TV series.." class="searchbox"><i class="fa fa-search arama"></i> </input>
<ul>
<li class="categories">Categories <i class="fa fa-caret-down" style="font-size:16px;"> </i>
<ul class="dropdown">
<li>TV Series</li>
<li>Movies</li>
</ul>
</li>
</ul>
</div>
<div class="menu sagheader">
<ul>
<li>
<button class="ikon dropdown-toggle" type="button" data-toggle="dropdown"><i class="far fa-user"></i> </button>
<ul class="dropdown-menu">
<li class="accountname"><b><script>document.write(document.cookie.substring(5))</script></b></li>
<li class="login"><i class="fa fa-sign-in-alt" style="color:red;"></i> Login </li>
<li class="signup"><i class="fa fa-user-plus" style="color:red;"></i> Sign up </li>
<li class="logout"><a onclick="deletecookie()" style="cursor:pointer;"><i class="fas fa-door-open" style="color:red;"></i> Log out</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div class="body" id="body">
<div class="baslik">Movies</div>
<div class="baslik2">See all</div>
<div id="movies">
</div>
<div class="baslik">Series</div>
<div class="baslik2">See all</div>
<div id="series">
</div>
<div class="baslik">Top Rated Movies</div>
<div class="baslik2">See all</div>
<div id="toprated">
</div>
</div>
<div class="footer">
<div class="">
<img src="img/sonlogo3.png" alt="logo">
<ul>
<li>Help</li>
<li>About</li>
<li>Contact</li>
<li>Terms and Policies</li>
</ul><br><br>
<ul>
<li>© 2021 Cinemeter</li>
<li class="destroy">|</li>
<li>All rights reserved.</li>
</ul>
</div>
</div>
</div>
Firebase Database
This is my website

While Firebase can order results, the results are always ascending. If you want to show them in descending order, you'll have to reverse them in your application code.
Something like this:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"));
get(query).then((snapshot)=>{
var movies=[];
snapshot.forEach(childSnapshot => {
movies.push(childSnapshot.val())
});
movies.reverse
});
If you want to get the top scores, you can use limitToLast in the query too:
const query = query(child(dbRef,"Movies"), orderByChild("movieScore"), limitToLast(5));
Also see the Firebase documentation on ordering and filtering data and limiting the number of results.
A few notes on your data structure:
Using sequential numeric keys for you nodes is an anti-pattern in Firebase, and it is typically better to use push keys. Also see Best Practices: Arrays in Firebase.
You're storing the score as a string, which is bound to lead to problems as strings are sorted lexicographically. I recommend converting your data to store the scores as numbers (so without " quotes around them).

filter doesn't show the result on the dom Angular?

What I need to do is to display the filtered array in the DOM once I click on any value from the dropdown. The return from filtered function is right but I couldn't update the DOM.
HTML CODE
This is my side dropdown list that I take the value from
<div class="col-md-3">
<div class="widget">
<h4 class="widget-title">Sort By</h4>
<div>
<select class="form-control" (change)="selectChangeHandler($event)">
<option value="Man">Man</option>
<option value="Women">Women</option>
<option value="Accessories">Accessories</option>
<option value="Shoes">Shoes</option>
</select>
</div>
</div>
</div>
Table that shows the results on DOM take the value from above dropdown list to be able to show them by category. Unfortunately the DOM doesn't change (I used NGX pagination library), please see my TS code that sends the filtered array to the loop? So, I don't understand why it didn't update.
<div class="col-md-9">
<div class="row" id="top">
<div class="col-md-4" *ngFor="let item of collection | paginate: { itemsPerPage: 100, currentPage: p ,id: 'foo' }">
<div class="product-item">
<div class="product-thumb">
<span class="bage">Sale</span>
<img class="img-responsive" src="https://via.placeholder.com/150" alt="product-img" />
<div class="preview-meta">
<ul>
<li>
<span data-toggle="modal" data-target="#product-modal">
<i class="fas fa-search"></i>
</span>
</li>
<li>
</i>
</li>
<li>
<i class="fas fa-shopping-cart"></i>
</li>
</ul>
</div>
</div>
<div class="product-content">
<h4>{{item.name}}</h4>
<p class="price">{{item.price}}</p>
</div>
</div>
</div>
Type Script Code
export class AllproductsComponent implements OnInit {
allProducts:any[]=[]
filteredData=[...this.allProducts]
p: number = 1;
collection: any[] = this.filteredData;
constructor(private _allproducts:ProductService) {
console.log(this.collection);
}
ngOnInit(): void {
this.getAllProducts()
}
getAllProducts():any{
this._allproducts.getAllproducts().subscribe(res=>{
console.log(res.data);
this.allProducts = res.data
this.collection =res.data
})
}
pageChanged(pee:number){
document.getElementById("top").scrollIntoView()
}
selectChangeHandler(value:any){
console.log(value.target.value);
console.log(this.filteredData);
this.filteredData = this.allProducts.filter(key=>{
if(value.target.value === "Man"){
if(key.price > 20)return this.allProducts
}else if(value.target.value === "Women"){
if(key.price < 20) return this.allProducts
}else {
return this.allProducts
}
})
console.log(this.filteredData);
}
}
I appreciate your help, thanks a lot.

allProducts:any[]=[]
filteredData=[...this.allProducts]
collection: any[] = this.filteredData;
you are initializing data before it is called from your api , so it's normal it will never work. You have to reinitialize it inside your method
this._allproducts.getAllproducts().subscribe(res=>{ ..});

How can show and hide a <li> inside the panel?

I have an app that has a login page. In order to login the user has the permission to see two voice inside the panel (if user is admin). If user is not admin I’d like to not display this voices. My problem is how to hide and show its. I have the panel inside index.html.This are the voice that I'd like to display or not in order users permission.
<li id="company" display="none">
<a href="/aziende/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
<li id="users" display="none">
<a href="/users/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">person</i>
<i class="material-icons md-only">account_circle</i>
</div>
<div class="item-inner">
<div class="item-title">Users</div>
</div>
</div>
</a>
</li>
this is app.js
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
if(user.checkPermission() == 'true'){
app.router.navigate('/home/');
}
}
},
},
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
if(user.checkPermission() == 'true'){
addVoicesToNavbar();
}
}
page.router.clearPreviousHistory();
}
},
}
this method said me that Cannot set property ‘display’ of null
function addVoicesToNavbar(){
document.getElementById("company").display = "block";
document.getElementById("users").display = "block";
}

display is not a valid html attribute, it is a CSS property.
So setting display="none" on your <li> in the example doesn't do anything.
Instead in your markup you need to set an inline CSS style like this to initially hide the element:
<li id="users" style="display:none;">
And in your function change that inline CSS style like this to show it:
document.getElementById("users").style.display = "block";

Here is an example of what you could do:
function addVoicesToNavbar(){
companyElement = document.getElementById("company");
companyElement.style.display = "block";
...
}
Hope it helps!

Displaying data on different card view

I am displaying weather data for each city on a card on button click
JSP page
<c:forEach var="list" items="${listHist}">
<div class="w3-container">
<ul class="w3-ul w3-card-4">
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
<img src="resources/assets/images/a1.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">
<div class="w3-bar-item">
<span><font size="6">Name : ${list.name}</font></span><br>
<span>
<ul><li class="card-text">Ticket Number : ${list.ticketNo}
<li class="card-text">From : ${list.fromCity}
<li class="card-text">To : ${list.toCity}
<li class="card-text">Date : ${list.travelDate}
<li class="card-text">Travel Class : ${list.travelClass}
<li class="card-text">Gender : ${list.gender}
<li class="card-text">Passenger type : ${list.ptype}
<li class="card-text">Price : ${list.price}
<p id="weatherdata"></p>
</li>
</ul>
</span>
<font color="white"><button type="button" class="btn btn-danger" onclick="currWeather("${list.toCity}");myFunction();" style="margin-left: 0px ">Weather</button></font>
</div>
</div>
</c:forEach>
My script: I have used jquery weather script where yahoo api has been used to fetch weather data for that city
function currWeather(city){
var city =city;
$(document).ready(function() {
$.simpleWeather({
location: city+', IN',
woeid: '',
unit: 'c',
success: function(weather) {
$("p").slideToggle();
/* $("div") */
document.getElementById("weatherdata").innerHTML=weather.code+" "+weather.temp+ " "+weather.units.temp+" "+weather.currently;
},
error: function(error) {
document.getElementById("weatherdata").innerHTML=error;
}
});
});
}
Problem: The data from the function is always displayed on the first card, even if the button on other cards are pressed. I want to display the weather data individually on each card after clicking on the button.

try using an index or a name <p id="weatherdata_#{loop.count}"></p> or even <p id="weatherdata_${list.name}"></p>
Use that unique id in the script

JSP Page:
<c:forEach var="list" items="${listHist}">
<div class="w3-container">
<ul class="w3-ul w3-card-4">
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
<img src="resources/assets/images/a1.png" class="w3-bar-item w3-circle w3-hide-small" style="width:85px">
<div class="w3-bar-item">
<span><font size="6">Name : ${list.name}</font></span><br>
<span>
<ul><li class="card-text">Ticket Number : ${list.ticketNo}
<li class="card-text">From : ${list.fromCity}
<li class="card-text">To : ${list.toCity}
<li class="card-text">Date : ${list.travelDate}
<li class="card-text">Travel Class : ${list.travelClass}
<li class="card-text">Gender : ${list.gender}
<li class="card-text">Passenger type : ${list.ptype}
<li class="card-text">Price : ${list.price}
<p id="weatherdata_${list.ticketNo}"></p>
</li>
</ul>
</span>
<font color="white"><button type="button" class="btn btn-danger" onclick="currWeather("${list.toCity}",${list.ticketNo});" style="margin-left: 0px ">Weather</button></font>
</div>
</div>
</c:forEach>
My Script:
function currWeather(city,ticketNo){
console.log(ticketNo);
console.log(city);
var city =city;
$(document).ready(function() {
$.simpleWeather({
location: city+', IN',
woeid: '',
unit: 'c',
success: function(weather) {
$("#weatherdata_"+ticketNo).slideToggle();
/* $("div") */
document.getElementById("weatherdata_"+ticketNo).innerHTML=weather.code+" "+weather.temp+ " "+weather.units.temp+" "+weather.currently;
},
error: function(error) {
document.getElementById("weatherdata_"+ticketNo).innerHTML=error;
}
});
});
}

Angular Directive Bug With View

I was doing a very quick exercise with angular directives. My code is very simple.
app.js:
var app = angular.module('readingList', []);
app.controller('BooksController', function($scope){
$scope.books = books;
$scope.genres = genres;
})
app.directive('bookGenres', function(){
return {
restrict: 'E',
templateURL: 'partials/book-genres.html'
};
});
var books = [{
title: 'ABCD',
author: 'E. Fgh',
isbn: '123414312341234',
review: 'Hello world',
rating: 4,
genres: {
'non-fiction': true, fantasy: false
}
}];
var genres = ["foo1","bar2","foo2","bar3"];
}
app.html:
<div class="row" ng-controller="BooksController">
<button class="btn btn-default">Create Review</button>
<hr />
<hr />
<ul class="list-unstyled col-sm-8" >
<li class="book row" ng-repeat="book in books">
<aside class="col-sm-3">
<a href="http://www.amazon.com/gp/product/{{book.isbn}}">
<img ng-src="http://images.amazon.com/images/P/{{book.isbn}}.01.ZTZZZZZZ.jpg" alt="" class="full"/>
</a>
<p class="goodRating rating">{{book.rating}}/5</p>
</aside>
<div class="col-sm-9 col-md-8">
<h3>
<a href="https://rads.stackoverflow.com/amzn/click/com/0553593714" rel="nofollow noreferrer">
{{book.title}}
</a>
</h3>
<cite class="text-muted">{{book.author}}</cite>
<p>{{book.review}}</p>
<!-- Put Genre Here -->
<book-genres></book-genres>
<ul class="list-unstyled">
<li ng-repeat="(genre, state) in book.genres">
<span class="label label-primary" ng-show="state === true">
{{genre}}
</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
book-genres.html:
<ul class="list-unstyled">
<li ng-repeat="(genre, state) in book.genres">
<span class="label label-primary" ng-show="state === true">
{{genre}}
</span>
</li>
</ul>
Everything renders with the view except my book-genres directive. For reason, it doesn't work. I have checked the documentation. I checked other similar examples and nothing. If I can't get this directive to work, rendering out the other components such as the image is going to be a problem. I also checked the path of the partials views as well.

There's a couple possibilities here. You need to be sure to inject $scope into your controller:
app.controller('BooksController', ['$scope', function($scope) {
// do stuff
}]);
book.genres is not defined anywhere, so your ng-repeat has no items to display.
templateURL is also incorrect, it should be templateUrl.