Как отобразить рейтинг звезд Laravel и Ajax

Question

Я создал систему отзывов, которая позволяет пользователю добавлять отзыв в продукт и отображать звездочки рейтинга. Поэтому, если пользователь оценил продукт на 4, он должен отображать 4 полные звезды и одну пустую звезду (как и в других системах обзора). Как я могу l oop и отображать каждый рейтинг звездочек в соответствии с отзывами пользователей?

Это данные, полученные от контроллера (console.log ())

data: Array(2)
0: "4" //This is the rating for user 1
1: "3"  // This is for user 2
length: 2

Контроллер

 $products = Product::where('id','=',$id)->with('reviews.user')->get();
        $data = array(); 
        foreach ($products as $product)
        {
        foreach ($product->reviews as $review){
        $data []= $review->rating; 
        }
        }
        return response()->json(['code' => 200,'data' => $data]);

Ajax

  function UserRateStars() {
  $.ajax({
    type: "GET",
    url: '{{route('userRate.stars ', $id)}}',
    success: function(data) {
        document.getElementById("UserRateStars").innerHTML = UserRateStars(3.6);

            // Round to nearest half
            var rating = Math.round(data * 2) / 2;
            let output = [];
            console.log(data);
            // Append all the filled whole stars
            for (var i = rating; i >= 1; i--)
                output.push('<div >full star</div>&nbsp;');

            // If there is a half a star, append it
            if (i == .5) output.push('<div >half star</div>&nbsp;');

            // Fill the empty stars
            for (let i = (5 - rating); i >= 1; i--)
                output.push('<div>empty star</div>&nbsp;');

            return output.join('');

        }
});

}
UserRateStars();

Answer 1

Здесь необходимо внести изменения в ваш код.

<script type="text/javascript">
function UserRateStars() {
    $.ajax({
        type: "GET",
        url: '{{route('userRate.stars ', $id)}}',
        success: function(data) { 
            var html = [];                      
            data.data.forEach(function (item, index) {
                var newDiv = document.createElement("div");
                newDiv.setAttribute("id", "user"+index);
                newDiv.innerHTML = SingleUserRateStars(item); 
                html.push(newDiv.outerHTML);
            });
            document.getElementById("UserRateStars").innerHTML = html.join('');                    
        }
    });
}
UserRateStars();

function SingleUserRateStars(rating) {

    // Round to nearest half
    rating = Math.round(rating * 2) / 2;
    let output = [];
    console.log(rating);
    // Append all the filled whole stars
    for (var i = rating; i >= 1; i--)
        output.push('<div style="display:inline-block" >full star</div>&nbsp;');

    // If there is a half a star, append it
    if (i == .5) output.push('<div style="display:inline-block" >half star</div>&nbsp;');

    // Fill the empty stars
    for (let i = (5 - rating); i >= 1; i--)
        output.push('<div style="display:inline-block" >empty star</div>&nbsp;');

    return output.join('');

}        
</script>

Я предполагаю, что внутренняя функция, которую вы использовали, - генерирование рейтинга отдельного пользователя и пользовательских данных, которые вы генерируете с сервера в виде массива. Например, ["2", "4", "4.5"]

Я разделил его на внешнюю сторону и зациклил каждый пользовательский рейтинг и обернул каждый рейтинг в одном div и добавил к целевому div. Надеюсь, это поможет вам.

Answer 2

когда вы копируете что-то из inte rnet, сначала посмотрите на него и посмотрите, как оно течет, поток явно неправильный, он бы выдал ошибку.

first: отдельные функции 1 для получения userRateStars

секунды, чтобы загрузить его, вы можете сделать это по событию или просто сделать функцию и вызвать ее из того места, где вы хотите

  function UserRateStars(rate) {

      // Round to nearest half
            var rating = Math.round(rate * 2) / 2;
            let output = [];
            console.log(rating);
            // Append all the filled whole stars
            for (var i = rating; i >= 1; i--)
                output.push('<div >full star</div>&nbsp;');

            // If there is a half a star, append it
            if (i == .5) output.push('<div >half star</div>&nbsp;');

            // Fill the empty stars
            for (let i = (5 - rating); i >= 1; i--)
                output.push('<div>empty star</div>&nbsp;');

            return output.join('');
}

// load ratings just say by click
 //  function loadRateStars() { // use this if you dont want event
   $('#btn_load_rating').on('click' , function() {
     $.ajax({
    type: "GET",
    url: '{{route('userRate.stars ', $id)}}',
    success: function(data) {
         // if you see in below line you are calling userratestars with 3.6
       // document.getElementById("UserRateStars").innerHTML = UserRateStars(3.6);
         // use it like this and return will show stars
        document.getElementById("UserRateStars").innerHTML = UserRateStars(data);

        }
    });

 })

я думаю, что это должно работать сейчас