how to show stars based on user rating?

Question

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>&nbsp;');

  // 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>&nbsp;');

  // 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>&nbsp;');

  return output.join('');

}
<% }); %>  
</script>
    <%- include ('_layouts/footer'); -%>

output result:

Answer 1

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

Answer 2

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.

1. In the Creation section for row

   <h3><%= products.title %></h3>
                   <b>Rating: <span id=stars></span><%= products.rating %>/5</b>
   

2. 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

1. 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>
   
   

2. 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.