I am trying to display the stars and append the <i> tag dynamically based on the count.

It's working fine, but the problem is if it has floating value then it displays the star in full, I need the star to be half (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=".12.3.min.js"></script>
<link href=".6.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="rating">
</div>

I am trying to display the stars and append the <i> tag dynamically based on the count.

It's working fine, but the problem is if it has floating value then it displays the star in full, I need the star to be half (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./jquery-1.12.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="rating">
</div>

• javascript
• jquery
• font-awesome

• Do you have half star in your font collection? – Rajaprabhu Aravindasamy Commented Apr 26, 2016 at 4:46
• @RajaprabhuAravindasamy: Yes, <i class="fa fa-star-half-o" aria-hidden="true"></i> – user4217999 Commented Apr 26, 2016 at 4:47
• jsfiddle/32L669tv/5 – Rayon Commented Apr 26, 2016 at 4:55
• If you're looking for a non-jQuery solution, just put 5 stars in a div and set the divs width to whatever your rating is, percentage-wise. – Seiyria Commented Apr 26, 2016 at 12:48

5 Answers 5

You can achieve what you want like 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

Edit as per your new requirement,

There is no need for 2 different for loops (simple math is enough)

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 like this,

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

try using some 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/8vmbc1a7/4/

If j <= ratingValue add a full star, else if j < ratingValue + 1 add a half-star, else 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />

<div class="rating">
</div>

updated your fiddle: https://jsfiddle/32L669tv/2/ take a 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 basic thing is -- if there are floating number in rating -- you don't need a single loop to show half star. just show full star based on full part and then half based on if there are any floats.

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

• if dif > 0.5 display a full star
• if 0.5 > dif > 0.1 display a half star

• if dif < 0.1 no additional stars 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