How to calculate and display ratings for awesome font using jQuery

Question

I am trying to show the stars and add the <i> dynamically based on the count.

It works fine, but the problem is that it has a floating value, then it displays the star in full, I need a half star (CSS class fa-star-half-o ).

This is what I tried:

 var ratingValue = 3.489; for (var j = 0; j < ratingValue; j++) { $(".rating").append('<i class="fa fa-star" aria-hidden="true"></i>'); } 

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <div class="rating"> </div> 

Answer 1

You can achieve what you want, as shown below,

 var ratingValue = 3.489, rounded = (ratingValue | 0); var decimal = ratingValue - rounded, $rating = $(".rating"); for (var j = 0; j < rounded ; j++) { $rating.append('<i class="fa fa-star" aria-hidden="true"></i>'); } if(decimal) { $rating.append('<i class="fa fa-star-half" aria-hidden="true"></i>'); } 

Demo

Change according to your new requirement,

No need for two different cycles (simple math)

 var ratingValue = 3.9, rounded = (ratingValue | 0); for (var j = 0; j < 5 ; j++) { $(".rating").append( '<i class="fa '+ ((j < rounded) ? "fa-star" : ((((ratingValue - j) > 0) && ((ratingValue - j) < 1)) ? "fa-star-half-o" : "fa-star-o")) +'" aria-hidden="true"></i>'); } 

Demo

And to make the code more readable, we can do it,

 var ratingValue = 1.9, rounded = (ratingValue | 0), str; for (var j = 0; j < 5; j++) { str = '<i class="fa '; if (j < rounded) { str += "fa-star"; } else if ((ratingValue - j) > 0 && (ratingValue - j) < 1) { str += "fa-star-half-o"; } else { str += "fa-star-o"; } str += '" aria-hidden="true"></i>'; $(".rating").append(str); } 

Demo

Answer 2

try using math

 var ratingValue = 3.489; var roundedValue = Math.trunc(ratingValue); for (var j = 0; j < roundedValue; j++) { $(".rating").append('<i class="fa fa-star" aria-hidden="true"></i>'); } var k = 0; if (ratingValue -roundedValue > 0.4 && ratingValue -roundedValue < 1) { k = 1; $(".rating").append('<i class="fa fa-star-half-o" aria-hidden="true"></i>'); } for (var i = Math.trunc(ratingValue)+k; i < 5; i++) { $(".rating").append('<i class="fa fa-star-o" aria-hidden="true"></i>'); } 

https://jsfiddle.net/8vmbc1a7/4/

Answer 3

If j <= ratingValue add a full star, otherwise if j < ratingValue + 1 add a half-star, add an empty star.

 var ratingValue = 3.489; for (var j = 1; j <= 5; j++) { $(".rating").append('<i class="fa fa-star' + ((j <= ratingValue) ? '' : ((j < ratingValue + 1) ? '-half-o' : '-o')) + '" aria-hidden="true"></i>'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> <div class="rating"> </div> 

Answer 4

updated his fiddle: https://jsfiddle.net/32L669tv/2/ look.

The code:

 var ratingValue = 3.489; var intRatingVal = parseInt(ratingValue); for(var j=0; j < intRatingVal; j++){ $(".rating").append( '<i class="fa fa-star" aria-hidden="true"></i>' ); } if ((ratingValue - intRatingVal) > 0) { $(".rating").append( '<i class="fa fa-star-half-o" aria-hidden="true"></i>' ); } 

The main thing - if there is a floating number in the rating, you do not need one cycle to show half the star. just show the full star based on the full part, and then half based on if there are any floats.

Answer 5

You can round the value and calculate the difference between the rounded value and the actual rating value: var dif = ratingValue - roundValue

• if dif > 0.5 display the full asterisk
• if 0.5 > dif > 0.1 display half asterisk

• if dif < 0.1 no additional stars are displayed

   var ratingValue = 3.489; var floorVal = Math.floor(ratingValue); for(var j=0; j<floorVal; j++){ $(".rating").append( '<i class="fa fa-star" aria-hidden="true"></i>' ); } var dif = ratingValue - floorVal; if(dif > 0.5) { $(".rating").append( '<i class="fa fa-star" aria-hidden="true"></i>' ) } else if(dif > 0.1) { $(".rating").append( '<i class="fa fa-star-half-o" aria-hidden="true"></i>' ); } 

Fiddle