How to turn number into star rating while Ajax success using JavaScript, jQuery in Spring Boot?

Question

I am working on a spring boot web application. I have a page where I need to show star rating system. Number of rating is stored in database. Format is: 1, 1.5, 2, 2.5...up to 5. I want to convert these numbers into stars. How should I do that after getting ajax response success from MySql DB.

    function getreview() {
                var productid = document.getElementById('pid').value;
                var url = "/api/getcustomerreview";
                $.post(url, {
                    productid : productid,
                }, function(data, status) {
                    if (data.status == "OK") {
                        if (data.statusCode == 1) {
                            var div = "", des = "";
                            var list = data.response;
                            var listlength = list.length;
                            if(listlength > 0){
                                for(var i = 0; i < listlength; i++) {
                                    var rating = list[i].reviewrating;
                                    var stars = "";
                                    console.log("Customer review rating: "+rating); // for product id 
     15 there is rating number 5 and 4
                                    div = div + "<div class=\"row\"><div class=\"col-lg-7\"><div class=\"review-wrapper\"><div class=\"single-review\"><div class=\"review-img\">"
                                    +"<img src=\"public/web/assets/images/1.png\" alt=\"\"/></div><div class=\"review-content\">"
                                    +"<div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">"
                                    +"<h4>"+list[i].customername+"</h4></div><div class=\"rating-product\"><i class=\"ion-android-star\"></i>"
                                    +"</div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>"
                                    +"</div><div class=\"review-bottom\"><p>"+list[i].reviewmessage+"</p></div></div></div>"
                                    +"<div class=\"single-review child-review\"><div class=\"review-img\">\<img src=\"public/web/assets/images/2.png\" alt=\"\"/>\</div>"
                                    +"<div class=\"review-content\"><div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">"
                                    +"<h4>"+list[i].customername+"</h4></div><div class=\"rating-product\"><i class=\"ion-android-star\"></i>"
                                    +"</div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>"
                                    +"</div><div class=\"review-bottom\"><p>"+list[i].reviewmessage+"</p></div></div></div>" 
                                    +"</div></div></div>";
                                    document.getElementById('des-details3').innerHTML = div;  
                                } 
                            }
                        } else {
                            var error = data.responseMessage;
                            swal(error, "", "error");
                        }
                    } else {
                        var error = data.responseMessage;
                        swal(error, "", "error");
                    }
                });
                
            }

Below is div tag is to display star according to rating number that has been stored in database.

<div class=\"rating-product\"><i class=\"ion-android-star\"></i></div>

Answer 1

Use array.fill() then convert the array to text:

const s5 = ["\u2606", "\u2606","\u2606", "\u2606", "\u2606"];
s5.fill('\u2B50',0,rating);
s5text  = s5.join("");