javascript - 无效的字符串长度错误

Question

我的 View 中有 map

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

在 json[i].rating 中，我有从 1 到 5 的数字，现在我显示它。但是我需要显示评分星级图像，例如这个

因此，例如，如果我的评分为 2，则我需要有两颗星。

我怎样才能正确地做到这一点？

这是我现在的工作片段

$(function() {
  const json = [{
    "name": "Park Hotel",
    "address1": "327 Cranbrook Road",
    "rating": 2,
    "lng": 0.065,
    "lat": 51.568,
    "pictures": [{
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390",
        "description": "Exterior"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391",
        "description": "Lobby"
      },
      {
        "url": "https://aobtravel.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391",
        "description": "Guest Room"
      }
    ],
    "sales_price": 2847
  }];
  const star = `
<img src="https://res.cloudinary.com/dzwdseno3/image/asset/f_auto/star-bb0cd011d3d4aa12c83109f30c6c17ed.png">
`;
  const token = 'pk.eyJ1IjoibmVtZXNpc2VzIiwiYSI6ImNqaDlqaDQycTA1ZnEzY3BpbDZpNHk1c2EifQ.KbuJOIjYh6VrWYo48yxETg';

  mapboxgl.accessToken = token;

  let map = new mapboxgl.Map({
    container: 'map-canvas',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [0.065, 51.568],
    zoom: 3
  });

  map.addControl(new mapboxgl.NavigationControl());
  $.each(json, function(i, item) {
    let myLatlng = new mapboxgl.LngLat(json[i].lng, json[i].lat);
  let stars = '';
for(let s = 0; i < 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">Reting: ' + json[i].rating + '</p>' + '</h3><p class="price-text-hotel" >Price ' + stars + '</p>'))
      .addTo(map);


  });
});

html,
body,
#map-canvas {
  height: 500px;
  margin: 0px;
  padding: 0px
}

#map-canvas {
  width: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />

<div id="map-canvas"></div>

我试过这个例子，我有

Invalid string length error

Answer 1

您似乎在寻找:

star.repeat(json[i].rating)

这对你有用吗？