Looking for a way to avoid repeating the same loop multiple times while sorting an object efficiently.
Take a look at this sample object:
movies = [
{
title: "The Lord of the Rings: The Fellowship of the Ring"
year: 2001
},
{
title: "The Lord of the Rings: The Two Towers"
year: 2002
},
{
title: "The Lord of the Rings: The Return of the King"
year: 2003
},
{
title: "A Beautiful Mind"
year: 2001
},
]
The goal is to sort these movies by year and display them on the screen as follows:
Year 2003
- The Lord of the Rings: The Return of the King
Year 2002
- The Lord of the Rings: The Two Towers
Year 2001
- A Beautiful Mind
- The Lord of the Rings: The Fellowship of the Ring
To achieve this in vue, one could define an array years = [2003, 2002, 2001] and implement:
<div v-for="y in years">
{{ y }}
<div v-for="m in movies">
<div v-if="m.year == y">
{{ m.title }}
</div>
</div>
</div>
However, this method involves looping through movies for each element in the years array.
An alternative approach would be to restructure the movies object like this:
moviesByYear = [
2003: [
{
title: "The Lord of the Rings: The Return of the King"
year: 2003
}
],
2002: [
{
title: "The Lord of the Rings: The Two Towers"
year: 2002
}
],
2001: [
{
title: "A Beautiful Mind"
year: 2001
},
{
title: "The Lord of the Rings: The Fellowship of the Ring"
year: 2001
}
]
]
This structure allows for a more efficient implementation using:
<div v-for="(movies, year) in moviesByYear" :key="year">
<div>{{ year }}</div>
<div v-for="m in movies">>
{{ m.title }}
</div>
</div>
However, building the moviesByYear array poses challenges, especially if sorting by ascending and descending year is required.
Seeking advice on solving this issue. Is there a better solution than repetitive v-for loops?