I would like to sort three top rated posts. The current function of displaying three post titles and their rating, but I can not sort them by best rating. Please help.
{posts.slice(0, 3).map((p)=> (
<p className='bestTitle'>{p.title} {p.ratings &&
((p.ratings.reduce(function(prev, current)
{return prev + current.rating}, 0)/(20 * p.ratings.length)).toFixed(2)) }</p>
))}
The posts will look like this:
{
posts:
{
title: "abc",
ratings:
username: "abc",
rating: 60
}
}
Assuming posts is an array, you can use javascript array sort.
But first, to make things easier to work with, we can preprocess the posts separately by adding/precalculating an averageRating field on each post.
After that, we can sort it and then you can use it where needed.
const posts = [{
title: "a",
ratings: [{
username: "dave",
rating: 10
}]
},
{
title: "b",
ratings: [{
username: "cam",
rating: 5
},
{
username: "lil",
rating: 50
}
]
},
{
title: "c",
ratings: [{
username: "az",
rating: 70
}]
}
];
// Process each post to store its average rating on the object
// This makes it easier for sorting.
averageRatingPosts = posts.map((post) => ({
...post,
averageRating: post.ratings.reduce((prev, current) => prev + current.rating, 0) / (20 * post.ratings.length)
}));
// Sort by descending order/best average ratings on a scale of 1-5
averageRatingPosts.sort((postA, postB) => postB.averageRating - postA.averageRating);
// Posts are now sorted by descending order of their average ratings.
console.log(averageRatingPosts);I don't recommend to do the sorting in the render function.
(Because you have to compute the overall rate for each post.)
Instead, you can first calculate the ratings and sort them. then show them on the render.
const [topPosts, setTopPosts] = useState([]);
useEffect(() => {
// copy posts
let posts_ = JSON.parse(JSON.stringify(posts));
posts_.forEach(post => {
post.rate = post.ratings &&
parseFloat((post.ratings.reduce( (prev, current) => prev + current.rating, 0)
/ (20 * post.ratings.length)).toFixed(2))
})
posts_.sort((a, b) => b.rate - a.rate)
posts_ = posts_.slice(0, 3);
setTopPosts(posts_);
}, [posts])
return <div>
{topPosts.map((p)=> (
<p className='bestTitle'>{p.title} {p.rate || ''}</p>
))}
</div>