JavaScript - Как получить рейтинг звезды из рейтинга поля массива объектов? - PullRequest
Новая
       8

JavaScript - Как получить рейтинг звезды из рейтинга поля массива объектов?

0 голосов
/ 13 декабря 2018

У меня есть этот массив объектов: 

var test_data = [    
                {
                    "id" : "Test01", //Has to be a string form ID
                    "test_info"  : "This is the test information",
                    "test_rating" : 5
                },
                {
                    "id" : "Test02", //Has to be a string form ID
                    "test_info"  : "This is the test information",
                    "test_rating" : 2
                }

В его нынешнем виде я использую следующее для заполнения неупорядоченного списка (но это только заполнение идентификатора) 

fieldOutputId.forEach(function(id) {
    $("#idList").append('<li><a href="#">' + id +" "+ "</a></li>"); 
});

Iя задаюсь вопросом, как получить звезды, появляющиеся справа со значением test_rating, которое хранится в fieldOutputRating, как показано, как показано на рисунке (звезды - красный текст)

Fig1: Star Rating

----- РЕДАКТИРОВАТЬ -----

Благодаря @ChrisG это получает его встроенным, id & test_rating: 

test_data.forEach(function(item) { $("#idList").append('<li><a href="#">' + item.id+ '</a><div class="fa fa-star">'+ item.test_rating+ "</div></li>"); })

С помощью приведенного выше кода я пытаюсь сделать так, чтобы звезды появлялись в строке (готово) и в качестве звездочек, используя потрясающую библиотеку шрифтов с class="fa fa-star

Вот что дает вышеприведенное:

Not Working Star Rating

Таким образом, он получает test_rating, но не дает за него звездочек.Любая помощь приветствуется ??

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Вы должны построить «звездный рейтинг» из ввода, как показано ниже: 

test_data.forEach(function(data) {
    let rating_str = '';
    for (let i = 0; i < data.rating; i++) rating_str += '*';
    $("#idList").append('<li><a href="#">' + data.id +" "+ "</a><span>" + rating_str + "</span></li>"); 
});

Если ваша «звезда» - это какое-то изображение, а не просто «*», как в моем примере кода,Вы можете сделать rating_str += '<img src="..." />'

0 голосов
/ 13 декабря 2018

Как то так? 

const test_data = [    
  {
    "id" : "Test01",
    "test_info"  : "This is the test information",
    "test_rating" : 5
  },
  {
    "id" : "Test02",
    "test_info"  : "This is the test information",
    "test_rating" : 2
  }
];

test_data.forEach(({id, test_rating}) => {
  $("#idList").append(`<li><a href="#">${id}</a> ${'*'.repeat(test_rating)}</li>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="idList" />
...