Sorting the array that I have programmed

I am trying to make an array of my recent Valorant Premier Matches.

The problem is, that I can't sort the array in any way, it seems to just sort itself and I don't know where.

My plan is to sort the array with the pointsBefore or pointsAfter value, so that the most recent match (with the highest value) is at the top while the first match is at the bottom (lowest value).

I hope you can help me!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

async function fetchMatchData(matchId) {
  const matchUrl = `https://api.henrikdev.xyz/valorant/v2/match/${matchId}`;
  const response = await fetch(matchUrl);
  const matchData = await response.json();
  return matchData.data;
}

async function fetchAndDisplayMatches() {
  const historyUrl = "https://api.henrikdev.xyz/valorant/v1/premier/70921669-f22e-4a59-9e26-f19664a1fa20/history";
  const response = await fetch(historyUrl);
  const historyData = await response.json();
  const leagueMatches = historyData.data.league_matches;

  // Sort the matches array based on points_before in descending order
  leagueMatches.sort((a, b) => b.points_before - a.points_before);

  const matchHistoryElement = document.getElementById("match-history");

  leagueMatches.forEach(async(match) => {
    const matchId = match.id;
    const matchData = await fetchMatchData(matchId);

    const redTeamName = matchData.teams.red.roster.name;
    const blueTeamName = matchData.teams.blue.roster.name;
    const isJstCarry = redTeamName === "JstCarry";
    const displayTeamName = isJstCarry ? blueTeamName : redTeamName;

    const redRoundsWon = matchData.teams.red.rounds_won;
    const redRoundsLost = matchData.teams.red.rounds_lost;
    const blueRoundsWon = matchData.teams.blue.rounds_won;
    const blueRoundsLost = matchData.teams.blue.rounds_lost;
    const roundsWon = isJstCarry ? redRoundsWon : blueRoundsWon;
    const roundsLost = isJstCarry ? redRoundsLost : blueRoundsLost;
    const matchScore = `${roundsWon} : ${roundsLost}`;

    const matchBox = document.createElement("div");
    matchBox.classList.add("match-box");

    if ((isJstCarry && redRoundsWon > redRoundsLost) || (!isJstCarry && blueRoundsWon > blueRoundsLost)) {
      const victoryDefeatElement = document.createElement("div");
      victoryDefeatElement.classList.add("victory-defeat");
      victoryDefeatElement.textContent = "VICTORY";
      matchBox.appendChild(victoryDefeatElement);
    } else {
      const victoryDefeatElement = document.createElement("div");
      victoryDefeatElement.classList.add("victory-defeat");
      victoryDefeatElement.textContent = "DEFEAT";
      matchBox.appendChild(victoryDefeatElement);
    }

    const jstCarryTeamNameElement = document.createElement("div");
    jstCarryTeamNameElement.classList.add("team-name", "left");
    jstCarryTeamNameElement.textContent = "JstCarry";

    const displayTeamNameElement = document.createElement("div");
    displayTeamNameElement.classList.add("team-name", "right");
    displayTeamNameElement.textContent = displayTeamName;

    const scoreElement = document.createElement("div");
    scoreElement.classList.add("score");
    scoreElement.textContent = matchScore;

    const pointsBefore = match.points_before; // Get the points_after value

    const pointsAfter = match.points_after; // Get the points_after value
    const pointsElement = document.createElement("div");
    pointsElement.classList.add("points");
    pointsElement.textContent = `${pointsBefore} ➜ ${pointsAfter} points`;




    matchBox.appendChild(jstCarryTeamNameElement);
    matchBox.appendChild(scoreElement);

    matchBox.appendChild(displayTeamNameElement);


    matchHistoryElement.appendChild(matchBox);
    scoreElement.appendChild(pointsElement); // Add the points element to the match box
  });
}

fetchAndDisplayMatches();

<!-- language: lang-css -->

body {
  min-width: 540px;
  font-family: 'Montserrat', sans-serif;
}

.match-box {
  background-color: #1B1C1E;
  border-radius: 25px;
  padding: 0;
  margin: 10px 0;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: white;
  padding: 0 20px;
  position: relative;
}

.victory-defeat {
  position: absolute;
  opacity: 0.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 25px;
}

.team-name {
  text-align: left;
}

.team-name.left {
  flex: 1;
}

.team-name.right {
  text-align: right;
  flex: 1;
}

.score {
  font-weight: bold;
  font-size: 50px;
  text-align: center;
  flex: 1;
}

.points {
  position: flex;
  text-align: center;
  font-size: 18px;
  opacity: 0.7;
}

<!-- language: lang-html -->

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Valorant Match History</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
</head>

<body>
  <div id="match-history"></div>

</body>

</html>

<!-- end snippet -->

The problem is that you're not processing the results in sorted order, because you're calling an async function in the forEach() loop.

Make an array of all the promises returned by fetchMatchData(matchId) and then use Promise.all() to process them in order.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

async function fetchMatchData(matchId) {
const matchUrl = `https://api.henrikdev.xyz/valorant/v2/match/${matchId}`;
const response = await fetch(matchUrl);
const matchData = await response.json();
return matchData.data;
}
async function fetchAndDisplayMatches() {
const historyUrl = "https://api.henrikdev.xyz/valorant/v1/premier/70921669-f22e-4a59-9e26-f19664a1fa20/history";
const response = await fetch(historyUrl);
const historyData = await response.json();
const leagueMatches = historyData.data.league_matches;
// Sort the matches array based on points_before in descending order
leagueMatches.sort((a, b) => b.points_before - a.points_before);
const matchHistoryElement = document.getElementById("match-history");
const resultPromises = leagueMatches.map(match => fetchMatchData(match.id));
(await Promise.all(resultPromises)).forEach((matchData, i) => {
let match = leagueMatches[i];
const redTeamName = matchData.teams.red.roster.name;
const blueTeamName = matchData.teams.blue.roster.name;
const isJstCarry = redTeamName === "JstCarry";
const displayTeamName = isJstCarry ? blueTeamName : redTeamName;
const redRoundsWon = matchData.teams.red.rounds_won;
const redRoundsLost = matchData.teams.red.rounds_lost;
const blueRoundsWon = matchData.teams.blue.rounds_won;
const blueRoundsLost = matchData.teams.blue.rounds_lost;
const roundsWon = isJstCarry ? redRoundsWon : blueRoundsWon;
const roundsLost = isJstCarry ? redRoundsLost : blueRoundsLost;
const matchScore = `${roundsWon} : ${roundsLost}`;
const matchBox = document.createElement("div");
matchBox.classList.add("match-box");
if ((isJstCarry && redRoundsWon > redRoundsLost) || (!isJstCarry && blueRoundsWon > blueRoundsLost)) {
const victoryDefeatElement = document.createElement("div");
victoryDefeatElement.classList.add("victory-defeat");
victoryDefeatElement.textContent = "VICTORY";
matchBox.appendChild(victoryDefeatElement);
} else {
const victoryDefeatElement = document.createElement("div");
victoryDefeatElement.classList.add("victory-defeat");
victoryDefeatElement.textContent = "DEFEAT";
matchBox.appendChild(victoryDefeatElement);
}
const jstCarryTeamNameElement = document.createElement("div");
jstCarryTeamNameElement.classList.add("team-name", "left");
jstCarryTeamNameElement.textContent = "JstCarry";
const displayTeamNameElement = document.createElement("div");
displayTeamNameElement.classList.add("team-name", "right");
displayTeamNameElement.textContent = displayTeamName;
const scoreElement = document.createElement("div");
scoreElement.classList.add("score");
scoreElement.textContent = matchScore;
const pointsBefore = match.points_before; // Get the points_after value
const pointsAfter = match.points_after; // Get the points_after value
const pointsElement = document.createElement("div");
pointsElement.classList.add("points");
pointsElement.textContent = `${pointsBefore} ➜ ${pointsAfter} points`;
matchBox.appendChild(jstCarryTeamNameElement);
matchBox.appendChild(scoreElement);
matchBox.appendChild(displayTeamNameElement);
matchHistoryElement.appendChild(matchBox);
scoreElement.appendChild(pointsElement); // Add the points element to the match box
});
}
fetchAndDisplayMatches();

<!-- language: lang-css -->

body {
  min-width: 540px;
  font-family: 'Montserrat', sans-serif;
}

.match-box {
  background-color: #1B1C1E;
  border-radius: 25px;
  padding: 0;
  margin: 10px 0;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: white;
  padding: 0 20px;
  position: relative;
}

.victory-defeat {
  position: absolute;
  opacity: 0.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 25px;
}

.team-name {
  text-align: left;
}

.team-name.left {
  flex: 1;
}

.team-name.right {
  text-align: right;
  flex: 1;
}

.score {
  font-weight: bold;
  font-size: 50px;
  text-align: center;
  flex: 1;
}

.points {
  position: flex;
  text-align: center;
  font-size: 18px;
  opacity: 0.7;
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valorant Match History</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<div id="match-history"></div>
</body>
</html>

<!-- end snippet -->