Как изменить блоки и добавить рейтинг в зависимости от ответа?

Question

[1programmer]

Изначально при загрузке страницы есть верстка модального окна с отзывами:

<div class="wrapper">
<div class="block">
    <div class="author">Grisha</div>
    <div class="rate">
        <b>Рейтинг:</b>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star filled"></span>
    </div>
</div>
<div class="block">
    <div class="author">Petya</div>
    <div class="rate">
        <b>Рейтинг:</b>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star"></span>
        <span class="star"></span>
    </div>
</div>
</div>

При выборе селекта на странице, летит запрос и с бекенда прилетает json, в котором уже другие отзывы.

Вопрос, как мне заменить первые блоки, на другие значения, которые прилетают ?
Пробовал так:

data.reviews.map((review, i) => {
                    $(".block").remove();
                    $(".wrapper").append(`<div class="block">
                    ...
                </div>`);
                });

Но выводится только последний отзыв.

И как правильно вывести , если с бека прилетает поле рейтинг и там допустим число 3. Значит 3 элемента будут с классом filled, а 2 оставшихся без него.

Comments

[twobomb]

Делай $(".block").remove(); вне цикла, перед data.reviews.map
и зачем тут map? Если это просто перебор, то используй forEach

[1programmer]

twobomb, сейчас попробую. А с элементом где filled, что можно сделать ?

[twobomb]

1programmer, Типа чтобы класс filled был только у вновь прилетевших? Если да то перед
data.reviews.map
допиши еще
$(".block").removeClass("filled");
а внутри цикла

$el = $(`<div class="block">
                    ...
                </div>`);
                    $(".wrapper").append($el);
$el.addClass("filled");

[1programmer]

twobomb, прилетает для каждого отзыва поле rating и там цифра например у первого 1, у второго 3. Значит у первого будет filled 1 звездочка, а у второго 3 звездочки

[twobomb]

1programmer, понял, вот так

var rate = 4;//Оценка которая пришла
$(".rate>.star").removeClass("filled").slice(0,rate).addClass("filled");

[1programmer]

twobomb, это внутри цикла же нужно использовать, верно ?

[twobomb]

1programmer, Нет, ну я не знаю где у вас там приходят оценки, может у вас отдельно они аяксом подгружются. Это пример как закрасить нужные звезды

[1programmer]

twobomb, Вот так, то есть внутри цикла

$.each(arr, (i, val) => {
$('.wrap').append(`
<div class="block">
    <div class="author">${val.author}</div>
    <div class="rate">
        <b>Рейтинг:</b>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star"></span>
        <span class="star"></span>
    </div>
</div>

`)
}

[twobomb]

1programmer,

$.each(arr, (i, val) => {
$el = $(`
<div class="block">
    <div class="author">${val.author}</div>
    <div class="rate">
        <b>Рейтинг:</b>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star filled"></span>
        <span class="star"></span>
        <span class="star"></span>
    </div>
</div>

`);
$el.find(".rate>.star").removeClass("filled").slice(0,val.rate).addClass("filled");
$('.wrap').append($el);
}

[1programmer]

twobomb, все равно почему то делает все звезды filled

[twobomb]

1programmer, В val.rate у тебя число от 0 до 5?

[1programmer]

Заработало, я ошибку допустил