Javascript Question posted in
A very good W3school tutorial can be found here.

for loop in vanilla JavaScript

I have a rating number for 3 different products,
and i am trying to render a star svg base of their rating number.
for example product-A has rate 3, I want to render star img, 3 times.
the maximum star they can have is 5.

i wrote a code like this

const ratingHandler = (productRate) => {
  for (let i = 0; i < productRate + 1; i++) {
    console.log(productRate);
    return `<img src="assets/star.svg" alt="rating-star" />`;
  }
};

product rate shows the rating number correctly in my console.log, but the render in the loop doesn’t render base of that number

Tags:

4

Answers


  1. 0

    Your function ends as soon as it first hits the return. You need to build up the complete string before returning:

    const ratingHandler = (productRate) => {
  let stars = '';
  for (let i = 0; i < productRate + 1; i++) {
    stars += `<img src="assets/star.svg" alt="rating-star" />`;
  }
  return stars;
};
    Login or Signup to reply.
  2. 0

    For fun: maybe an alternative (no loop) way of inserting the stars:

    const repeatString = (str, n = 2) => [...Array(n + 1)].join(str);
const rating = 3;

document.body.insertAdjacentHTML(
  `beforeend`,
  `<div class="rating" data-rating="${rating}">${
    repeatString(`<span class="star active"></span>`, rating)}
    ${repeatString(`<span class="star empty"></span>`, 5-rating)}
  </div>`);
    .rating:before {
  content: 'Your rating ('attr(data-rating)'/5): ';
}

.star {
  background-repeat: no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-left: 3px;
}

.active {
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%22800px%22%20width%3D%22800px%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%0A%09%20viewBox%3D%220%200%2047.94%2047.94%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20style%3D%22fill%3A%23ED8A19%3B%22%20d%3D%22M26.285%2C2.486l5.407%2C10.956c0.376%2C0.762%2C1.103%2C1.29%2C1.944%2C1.412l12.091%2C1.757%0A%09c2.118%2C0.308%2C2.963%2C2.91%2C1.431%2C4.403l-8.749%2C8.528c-0.608%2C0.593-0.886%2C1.448-0.742%2C2.285l2.065%2C12.042%0A%09c0.362%2C2.109-1.852%2C3.717-3.746%2C2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403%2C0l-10.814%2C5.685%0A%09c-1.894%2C0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528%0A%09c-1.532-1.494-0.687-4.096%2C1.431-4.403l12.091-1.757c0.841-0.122%2C1.568-0.65%2C1.944-1.412l5.407-10.956%0A%09C22.602%2C0.567%2C25.338%2C0.567%2C26.285%2C2.486z%22%2F%3E%0A%3C%2Fsvg%3E);
}

.empty {
  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EONE-xicons%3C%2Ftitle%3E%3Cpath%20d%3D%22M39.13%2C48a1.26%2C1.26%2C0%2C0%2C1-.62-0.16L23.78%2C40.3a0.27%2C0.27%2C0%2C0%2C0-.27%2C0l-15%2C7.07a1.24%2C1.24%2C0%2C0%2C1-1.32-.11%2C1.33%2C1.33%2C0%2C0%2C1-.52-1.32L11%2C30.45a0.34%2C0.34%2C0%2C0%2C0-.09-0.25L0.37%2C19.05a1.34%2C1.34%2C0%2C0%2C1-.29-1.37%2C1.29%2C1.29%2C0%2C0%2C1%2C1-.86l14.91-2a0.29%2C0.29%2C0%2C0%2C0%2C.22-0.17L23.14%2C0.72A1.27%2C1.27%2C0%2C0%2C1%2C24.29%2C0h0a1.28%2C1.28%2C0%2C0%2C1%2C1.15.77l6.48%2C14.34%2C15%2C2.55a1.29%2C1.29%2C0%2C0%2C1%2C1%2C.9%2C1.34%2C1.34%2C0%2C0%2C1-.33%2C1.36L36.66%2C30.67a0.34%2C0.34%2C0%2C0%2C0-.09.29L40.4%2C46.43a1.34%2C1.34%2C0%2C0%2C1-.55%2C1.35A1.26%2C1.26%2C0%2C0%2C1%2C39.13%2C48ZM23.62%2C39.25a1.28%2C1.28%2C0%2C0%2C1%2C.63.17L39%2C47h0a0.26%2C0.26%2C0%2C0%2C0%2C.28%2C0%2C0.33%2C0.33%2C0%2C0%2C0%2C.13-0.33L35.58%2C31.16A1.36%2C1.36%2C0%2C0%2C1%2C36%2C30L46.9%2C19.21A0.34%2C0.34%2C0%2C0%2C0%2C47%2C18.86a0.3%2C0.3%2C0%2C0%2C0-.23-0.21L31.51%2C16a0.5%2C0.5%2C0%2C0%2C1-.37-0.29L24.55%2C1.18A0.28%2C0.28%2C0%2C0%2C0%2C24.29%2C1a0.29%2C0.29%2C0%2C0%2C0-.26.17L17.15%2C15.11a1.29%2C1.29%2C0%2C0%2C1-1%2C.71l-14.91%2C2A0.29%2C0.29%2C0%2C0%2C0%2C1%2C18a0.35%2C0.35%2C0%2C0%2C0%2C.07.35L11.67%2C29.51A1.35%2C1.35%2C0%2C0%2C1%2C12%2C30.68L7.63%2C46.14a0.32%2C0.32%2C0%2C0%2C0%2C.14.29%2C0.25%2C0.25%2C0%2C0%2C0%2C.28%2C0l15-7.07A1.21%2C1.21%2C0%2C0%2C1%2C23.62%2C39.25Z%22%2F%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
}
    Login or Signup to reply.
  3. 0

    Note the great comments of @VLAZ at the question:

    const ratingHandler = productRate =>
  '<img src="assets/star.svg" alt="rating-star" />'.repeat(productRate+1)
    Login or Signup to reply.
  4. 0

    If you want to be the cool guy in class and nobody should understand your code, but it should still do its job, this is your go-to:

    const ratingHandler = (productRate) => [undefined].concat(productRate ?? []).reduce((all) => all += '<img src="assets/star.svg" alt="rating-star" />', "");

    Thank me later!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search