Question

我有这个对象数组：

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
                }

就目前情况而言，我正在使用以下内容填充无序列表（但仅填充ID）

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

我想知道如何使星标以test_rating的值存储在fieldOutputRating中，如右图所示显示（星标为红色文本）

Fig1：

-----编辑-----

感谢@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的超棒字体库使星星以直线形式（完成）并以星星形式出现。

这就是上面给出的：

因此它获得了test_rating，但没有给出任何星星。感谢您的帮助？

Answer 1

像这样吗？

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" />

Answer 2

您需要从输入中建立“星级”，如下所示：

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="..." />'

Javascript-如何从对象数组字段评级中获得星级？

2 个答案: