How to display star rating by Id in laravel/octobercms and twig? - laravel

Question

I have this query to display rating and it works fine
$ads = Advert::find(151);
$this['userAverageRating'] = $ads->ratings()->avg('rating');
to display it in twig i have this that works too
<div align="left" style="font-size: 12px;">
{% if userAverageRating %}
{% for i in range(1,5) %}
{% if userAverageRating >= max(0, i-0.25) %}
<span style="color: orange" class="fa fa-star"></span>
{% elseif (userAverageRating > (i-0.75)) %}
<span style="color: orange" class="fa fa-star-half-o"></span>
{% else %}
<span style="color: orange" class="fa fa-star-o"></span>
{% endif %}
{% endfor %}
<span><b>{{ userAverageRating|round(1, 'floor') }}/5</b></span>
{% else %}
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span style="font-size: 12px"><b></b></span>
{% endif %}
</div>
The above twig tag is in a twig foreach
{% for ad in ads %}
{{ ad.title }}
{{ ad.description }}
...
//the above twig tag here
{% endfor %}
My main problem is that the rating of ad id "151" displays on all the ad foreach results, instead of just ad with id 151. Any ideas why this is and how to fix it

Answer 1

Looking at your php variable $ads = Advert::find(151); this will literally return the advert with id = 151.
try changing this to $ads = Advert::all(); or $ads = Advert::get();
if you need the rating relation attached to each of the Advert results, you could also eager load this.
$ads = Advert:with('ratings')->get();
Then run your logic against ads.rating in twig.
Consider calculating what you need in your component before sending it to the front end. then just looping over the single result.

Answer 2

Two ways to solve this issue and I think the first way is more elegant. Some things to note is I am guessing on how to work with your models. So you might have to adjust the if ($ad->ratings()->first) I am assuming it will return null if there isn't something there. The second way is closer to your logic now but you need to add the id (or something unique) so you can use twig to check ids like {% if userAverageRating and ad.id == userAverageRating.id %}.
1: Foreach and modify the collections of every ad to average the rating.
$ads = Advert::all();
foreach ($ads as $ad) {
if ($ad->ratings()->first) {
$ad->averageRating = $ad->ratings()->avg('rating');
}
else {
$ad->averageRating = null;
}
}
$this['ads'] = $ads;
//Twig Script
{% if ad.averageRating %}
{% for i in range(1,5) %}
{% if ad.averageRating >= max(0, i-0.25) %}
<span style="color: orange" class="fa fa-star"></span>
{% elseif (ad.averageRating > (i-0.75)) %}
<span style="color: orange" class="fa fa-star-half-o"></span>
{% else %}
<span style="color: orange" class="fa fa-star-o"></span>
{% endif %}
{% endfor %}
<span><b>{{ ad.averageRating|round(1, 'floor') }}/5</b></span>
{% else %}
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span style="font-size: 12px"><b></b></span>
{% endif %}
2: Collect the ratings in an array with ad ID.
$ads = Advert::all();
$ratings = [];
foreach ($ads as $key => $ad) {
if ($ad->ratings()->first) {
$ratings[$key] = [ 'id' = $ad->id, 'rating' = $ad->ratings()->avg('rating') ];
}
else {
$ratings[$key] = null;
}
}
$this['userAverageRating'] = $ratings;
//Twig Script
{% if userAverageRating and ad.id == userAverageRating.id %}
{% for i in range(1,5) %}
{% if userAverageRating >= max(0, i-0.25) %}
<span style="color: orange" class="fa fa-star"></span>
{% elseif (userAverageRating > (i-0.75)) %}
<span style="color: orange" class="fa fa-star-half-o"></span>
{% else %}
<span style="color: orange" class="fa fa-star-o"></span>
{% endif %}
{% endfor %}
<span><b>{{ userAverageRating|round(1, 'floor') }}/5</b></span>
{% else %}
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span style="font-size: 12px"><b></b></span>
{% endif %}