Grouping my data in the view - nodejs - node.js

Question

I grab some data from postgresql DB and want to display it in a view, simple enough as below
routes.js
app.get('/fixtures', async (req, res) => {
const fixtures = await queries.getFixtures();
res.render('fixtures', { fixtures });
});
fixtures returns
[ { id: 27,
home_team: 'Chelsea',
away_team: 'Liverpool',
league_name: 'English Premiership',
},
{ id: 25,
home_team: 'Man Utd',
away_team: 'Everton',
league_name: 'English Premiership',
},
{ id: 30,
home_team: 'Istanbul Basaksehir',
away_team: 'Akhisar Belediye',
league_name: 'Turkish Super Lig',
}
]
getFixtures();
async function getFixtures() {
let response;
try {
response = await pool.query('select * from fixtures ORDER BY league_name ASC');
} catch (e) {
console.error('Error Occurred', e);
}
return response.rows;
}
fixtures.ejs
<% fixtures.forEach((fixture) => { %>
<p><%=fixture.league_name %></p>
<p><%= fixture.home_team %> vs <%= fixture.away_team %> </p>
<% }) %>
So the above will output
English Premiership
Chelsea vs Liverpool
English Premiership
Man Utd v Everton
Turkish Super Lig
Istanbul Basaksehir vs Akhisar Belediye
However I would like to group my fixtures by league and would prefer to have the view output as
English Premiership
Chelsea vs Liverpool
Man Utd v Everton
Turkish Super Lig
Istanbul Basaksehir vs Akhisar Belediye
How do I go about achieving this? Is this something at DB query level or something I do in the view? (though probably not the best place to keep logic I guess)
Thanks

Answer 1

I'm not sure what tools/libs you are using but without depending on any libs/tools you can do it using vanilla JavaScript. For example, check the following code:
app.get('/fixtures', async (req, res) => {
const fixtures = await queries.getFixtures();
const grouped = groupByLeagueName(fixtures);
res.render('fixtures', { fixtures: grouped });
});
Then, implement the groupByLeagueName function like this:
function groupByLeagueName(fixtures) {
return fixtures.reduce((result, item) => {
result[item.league_name] = result[item.league_name] || [];
result[item.league_name].push(item);
return result;
}, {});
}
Then in your view you may loop it something like this:
<% for (let leagueName in fixtures) { %>
<p><%= leagueName %></p>
<% fixtures[leagueName].forEach((match, key) => { %>
<p><%= match.home_team %> vs <%= match.away_team %> </p>
<% }) %>
<% } %>