0
288
Viewshow to show stars based on user rating?
i woud like to show star based on rating . i can only show one product with rating stars and the other products don't show any star only show rating number. could help to check which part need to change ?
<%- include ('_layouts/header'); -%>
<h1>......Exciting Books.....</h1>
<hr size="100" width="100%" align="center" color="black">
<br>
<div class="row products">
<% savedexcit.forEach(function(products){ %>
<div class="col-xs-12 col-md-4 p shop-item">
<a class="pa" href="/products/<%= products.category %>/<%= products.slug %>">
<img class="pimage" src="/product_images/<%= products.id %>/<%= products.image %>" alt="">
</a>
<h3><%= products.title %></h3>
<b>Rating: <span id=stars></span><%= products.rating %>/5</b>
<a class="vd" href="/products/<%= products.category %>/<%= products.slug %>">View Details</a>
</div>
<% }); %>
</div>
<script>
<% savedexcit.forEach(function(products){ %>
document.getElementById("stars").innerHTML = getStars(<%= products.rating %>);
function getStars(rating) {
// Round to nearest half
rating = Math.round(rating * 2) / 2;
let output = [];
// Append all the filled whole stars
for (var i = rating; i >= 1; i--)
output.push('<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> ');
// If there is a half a star, append it
if (i == .5) output.push('<i class="fa fa-star-half-o" aria-hidden="true" style="color: gold;"></i> ');
// Fill the empty stars
for (let i = (5 - rating); i >= 1; i--)
output.push('<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> ');
return output.join('');
}
<% }); %>
</script>
<%- include ('_layouts/footer'); -%>
output result:
2 answers
Answer question0
you can use jquery library:
https://www.jqueryscript.net/other/rating-star-icons.html
<div id="dataReadonlyReview"
data-rating-stars="5"
data-rating-readonly="true"
data-rating-value="3"
data-rating-input="#dataReadonlyInput">
and you can see : Turn a number into star rating display using jQuery and CSS
0
Edit: I have edited the answer to be more specific. Also, I believe this to be ejs template just to be more clear.
Id in html is used for identifying individual element and Checking your code there are two places where ID is wrongly declared, that is you are declaring it multiple times.
In the Creation section for row
<h3><%= products.title %></h3> <b>Rating: <span id=stars></span><%= products.rating %>/5</b>In the script tag where you are accessing id
<% savedexcit.forEach(function(products){ %> document.getElementById("stars").innerHTML = getStars(<%= products.rating %>);
To solve this issue you either need to add different ids, which you can do simply by adding a counter to it or you need to add a class on the star and use it to access the elements or just access it by using class. You can try to do the following changes and this should solve the issue hopefully
Access the index for it by including a variable(index) in the callback function.
<% savedexcit.forEach(function(products, index){ %> <div class="col-xs-12 col-md-4 p shop-item"> <a class="pa" href="/products/<%= products.category %>/<%= products.slug %>"> <img class="pimage" src="/product_images/<%= products.id %>/<%= products.image %>" alt=""> </a> <h3><%= products.title %></h3> <b>Rating: <span id="stars<%= index %>">></span><%= products.rating %>/5</b>Then make the same change inside the script tag as below
<% savedexcit.forEach(function(products,index){ %> document.getElementById("stars<%= index %>").innerHTML = getStars(<%= products.rating %>);
This should change target the specific element id.