Javascript 在弹出窗口中显示星级

我看到了地图

在标记的弹出窗口中，我显示信息

在json[i]中，我有一个从1到5的数字，现在我显示它。但我需要展示明星形象，比如这个

因此，如果我有例如2的评级，我需要有两颗星

我如何才能正确地做到这一点

这是我现在的工作片段

$（函数（）{
常量json=[
{
“名称”：“公园酒店”，
“地址1”：“克兰布鲁克路327号”，
“评级”：2，
“液化天然气”：0.065，
“lat”：51.568，
“图片”：[
{
“url”：”https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390",
“说明”：“外部”
},
{
“url”：”https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390",
“说明”：“大厅”
},
{
“url”：”https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390",
“说明”：“大厅”
},
{
“url”：”https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391",
“说明”：“大厅”
},
{
“url”：”https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391",
“说明”：“客房”
}
],
“销售价格”：2847
}];
常量标记='…'；
mapboxgl.accessToken=令牌；
让map=newmapboxgl.map({
容器：“映射画布”，
风格：'mapbox://styles/mapbox/streets-v9',
中间：[0.065,51.568]，
缩放：3
});
addControl（新的mapboxgl.NavigationControl（））；
$.each（json，函数（i，项）{
让myLatlng=new mapboxgl.LngLat（json[i].lng，json[i].lat）；
let marker=new mapboxgl.marker（）
.setLngLat（myLatlng）
.setPopup（新的mapboxgl.Popup({
抵销：25
})
.setHTML（'+json[i].name+'
'+json[i].address1+''
Reting:'+json[i].rating+'
'+'
price'+json[i]
.addTo（地图）；
});
});

html，正文，#地图画布{
高度：500px；
边际：0px；
填充：0px
}
#地图画布{
宽度：800px；
}
请在下面找到解决您问题的方法。
您将在我的评论下面找到更改

我将您的星图指定给一个名为
star
的常数。
然后使用for循环将该图形
json[i]追加到
stars
变量中。
stars
变量现在将替换
setHTML
方法中的
json[i].rating

希望这有帮助

$(function() {
  const json = <%= @hotel_info.to_json.html_safe %>;
  // Your stat images here
  const star = `
    <img src="https://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png">
`;

  const token = '*********';
  let centerLatlng = new mapboxgl.LngLat(gon.destination_city.lng, gon.destination_city.lat);
  mapboxgl.accessToken = token;

  let map = new mapboxgl.Map({
    container: 'map-canvas',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: centerLatlng,
    zoom: 9
  });

  map.addControl(new mapboxgl.NavigationControl());
  $.each(json, function(i, item) {
    let myLatlng = new mapboxgl.LngLat(json[i].lng, json[i].lat);

    // Your stars being generated
    let stars = '';
    for(let s = 0; s < json[i].rating; s++) {
        stars += star;
    }

    let marker = new mapboxgl.Marker()
      .setLngLat(myLatlng)
      .setPopup(new mapboxgl.Popup({
          offset: 25
        })
        .setHTML('<h3 class="hotel_name">' + json[i].name + '</h3><p class="adress-text-hotel">' + json[i].address1 + '</p>' + '</h3><p class="rating-title"><%= _("Rating") %>: ' + stars + '</p>' + '</h3><p class="price-text-hotel" ><%= _("Price") %>:  ' + json[i].sales_price + '</p>'))
      .addTo(map);


  });
});

$（函数（）{
常量json=；
//你的统计图像在这里
常数星=`
`;
常量标记='********'；
设centerLatlng=new mapboxgl.LngLat（gon.destination_city.lng，gon.destination_city.lat）；
mapboxgl.accessToken=令牌；
让map=newmapboxgl.map({
容器：“映射画布”，
风格：'mapbox://styles/mapbox/streets-v9',
中心：中心板条，
缩放：9
});
addControl（新的mapboxgl.NavigationControl（））；
$.each（json，函数（i，项）{
让myLatlng=new mapboxgl.LngLat（json[i].lng，json[i].lat）；
//你的星星正在生成
让星星为你；
for（设s=0；s'+json[i].address1+'
'+'
：'+stars+'
'+'
：'+json[i].sales_price+'
'））
.addTo（地图）；
});
});
请单击
并在包含您的示例的文档中发布HTML、CSS和代码JSON@mplungjan我很抱歉。刚刚意识到我犯了一个愚蠢的错误：`for（让s=0；II
应该是
s