Question

任何帮助都会受到赞赏。我需要根据moviedb API中的JSON数据创建一个滑块。我在for循环中创建了显示标题，图片和描述的滑块，但我需要做的最后一件事是获得电影评级，而不是我需要显示的数字（根据数据填充一半或全部）提供）。

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

非常感谢您的帮助。如果你需要别的东西，请不要犹豫，因为这是我在stackoverflow上的第一篇文章。

这是我工作的小提琴：

这是获取数据的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库，它会为你提供很多很多你可以玩的图标。 link

这是Check them out

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>');
    }
});
});

将JSON号转换为星号

1 个答案: