将 JSON 数字转换为星号

Question

任何帮助将不胜感激。我需要基于来自 moviedb API 的 JSON 数据创建一个滑块。我在for循环中创建了显示标题、图片和描述的滑块，但我需要实现的最后一件事是获得电影评级，而不是我需要显示星星的数字（根据数据填充一半或全部填充）提供）。

我被卡住并尝试了不同的东西，但它不起作用。我知道这很简单，但我被卡住了。

非常感谢您的帮助。如果您需要其他内容，请不要犹豫，因为这是我在 stackoverflow 上的第一篇文章。

这是我的工作的小提琴：

https://jsfiddle.net/y2hbzej8/7/

这是我获取数据的 JS 代码：

JS：

var urlmoviedb = 'https://api.themoviedb.org/3/movie/upcoming?api_key=e082a5c50ed38ae74299db1d0eb822fe';

$(function() {
$.getJSON(urlmoviedb, function (data) {
console.log(data); 
for (var x = 0; x < data.results.length; x++) {
    var title = data.results[x].original_title; 
    var descr = data.results[x].overview; 
    var note = data.results[x].vote_average; 
    var noteround = Math.round(2 * note) / 2; 
    var str = "/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg";
    var imageurl = str.replace("/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg", "https://image.tmdb.org/t/p/w1280");
    var image = imageurl + data.results[x].backdrop_path;
    $('#image').append('<li>' + '<h2 class="h2-like mt-4">' + title + '</h2>' + '<p class="note">' + noteround + '</p>' + "<img class='img-fluid mb-4' src='" + image + "'>" + '<p class="descr">' + descr + '</p>' + '</li>');
  }
});

Answer 1

将每行的 vote_average 字段除以 2，因为值从 0 到 10。这将为您提供基于五颗星的值。

我编辑了你的例子，我添加了字体很棒的 CSS 库，它会给你很多可以玩的图标。 Check them out

这是edited example on JSFiddle

var urlmoviedb = 'https://api.themoviedb.org/3/movie/upcoming?api_key=e082a5c50ed38ae74299db1d0eb822fe';

$(function() {
$.getJSON(urlmoviedb, function(data) {
    console.log(data);
    for (var x = 0; x < data.results.length; x++) {
    var title = data.results[x].original_title;
    var descr = data.results[x].overview;
    var note = data.results[x].vote_average;
    var noteround = Math.round(2 * note) / 2;
    var str = "/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg";
    var imageurl = str.replace("/jj8qgyrfQ12ZLZSY1PEbA3FRkfY.jpg", "https://image.tmdb.org/t/p/w1280");
    var image = imageurl + data.results[x].backdrop_path;

    //Translate vote average field into number of stars by dividing them by two since vote_average goes from 0 to 10
    var numberOfStars = Math.round(note/2);
    var stars = '';

    for(var index = 0; index < numberOfStars; index++)
        stars += '<span class="fa fa-star"/>';

    $('#image').append('<li>' + '<h2 class="h2-like mt-4">' + title + '</h2>' + "<img class='img-fluid mb-4' src='" + image + "'>" + '<p class="descr">' + descr + '</p>' + stars + '</li>');
    }
});
});