TYPOI TYPOI - 1 month ago 15
Javascript Question

generate equivalent svg stars for each imdb rating jquery

I am taking a imdb rating from an omdb json object and trying to generate equivalent svg stars for each rating.

In my example the movie has a rating of 8.0. I'm not sure why but in my code currently I am generating 11 stars with clone. Alternatively, I was thinking I could use an array of stars to append multiple stars for each rating. I have 30 movies with different ratings. How can I generate equivalent stars for each rating?

$( document ).ready(function() {

movie = {
Title: "The Exorcist",
Year: "1973",
Metascore: "82",
imdbRating: "8.0",
}
// red star
const $star = $(`<svg width="75" height="50"><polygon points="25,2.5, 10,49 47.5,17.5, 2.5,17.5,40,49" style="fill:red;stroke:none;stroke-width:5;"/></svg>`);

// movie rating
const rate = parseInt(movie.imdbRating);
$(".row").text(`Movie IMDB Rating: ${rate}`);

// 10 star array
const ratingStars =[$star,$star,$star,$star,$star,$star,$star,$star,$star,$star];

for(let i = 0; i <= ratingStars.length; i++) {
if(rate === 8 ) {
$star.clone().appendTo($("#star"));
}
}


});

Answer

what you want to do is

for(let i = 0; i < rate; i++) {
    $star.clone().appendTo($("#star"));
}

so, if rate is 8.0 to 8.999, you get 8 stars