排序我已经编程的数组。

huangapple go评论156阅读模式
英文:

Sorting the array that I have programmed

问题

我正在尝试创建一个包含我最近的Valorant Premier比赛的数组。

问题是,我无法以任何方式对数组进行排序,它似乎只是自行排序,我不知道在哪里排序。

我的计划是根据pointsBeforepointsAfter值对数组进行排序,使得最近的比赛(具有最高的值)位于顶部,而第一场比赛位于底部(最低值)。

我希望你能帮助我!

英文:

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 = &quot;https://api.henrikdev.xyz/valorant/v1/premier/70921669-f22e-4a59-9e26-f19664a1fa20/history&quot;;
  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) =&gt; b.points_before - a.points_before);

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

  leagueMatches.forEach(async(match) =&gt; {
    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 === &quot;JstCarry&quot;;
    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(&quot;div&quot;);
    matchBox.classList.add(&quot;match-box&quot;);

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

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

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

    const scoreElement = document.createElement(&quot;div&quot;);
    scoreElement.classList.add(&quot;score&quot;);
    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(&quot;div&quot;);
    pointsElement.classList.add(&quot;points&quot;);
    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: &#39;Montserrat&#39;, 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 -->

```
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

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

&lt;body&gt;
  &lt;div id=&quot;match-history&quot;&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

问题在于你没有按顺序处理结果,因为你在forEach()循环中调用了异步函数。

创建一个包含fetchMatchData(matchId)返回的所有Promise的数组,然后使用Promise.all()按顺序处理它们。

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();

希望这对你有所帮助!

英文:

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 = &quot;https://api.henrikdev.xyz/valorant/v1/premier/70921669-f22e-4a59-9e26-f19664a1fa20/history&quot;;
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) =&gt; b.points_before - a.points_before);
const matchHistoryElement = document.getElementById(&quot;match-history&quot;);
const resultPromises = leagueMatches.map(match =&gt; fetchMatchData(match.id));
(await Promise.all(resultPromises)).forEach((matchData, i) =&gt; {
let match = leagueMatches[i];
const redTeamName = matchData.teams.red.roster.name;
const blueTeamName = matchData.teams.blue.roster.name;
const isJstCarry = redTeamName === &quot;JstCarry&quot;;
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(&quot;div&quot;);
matchBox.classList.add(&quot;match-box&quot;);
if ((isJstCarry &amp;&amp; redRoundsWon &gt; redRoundsLost) || (!isJstCarry &amp;&amp; blueRoundsWon &gt; blueRoundsLost)) {
const victoryDefeatElement = document.createElement(&quot;div&quot;);
victoryDefeatElement.classList.add(&quot;victory-defeat&quot;);
victoryDefeatElement.textContent = &quot;VICTORY&quot;;
matchBox.appendChild(victoryDefeatElement);
} else {
const victoryDefeatElement = document.createElement(&quot;div&quot;);
victoryDefeatElement.classList.add(&quot;victory-defeat&quot;);
victoryDefeatElement.textContent = &quot;DEFEAT&quot;;
matchBox.appendChild(victoryDefeatElement);
}
const jstCarryTeamNameElement = document.createElement(&quot;div&quot;);
jstCarryTeamNameElement.classList.add(&quot;team-name&quot;, &quot;left&quot;);
jstCarryTeamNameElement.textContent = &quot;JstCarry&quot;;
const displayTeamNameElement = document.createElement(&quot;div&quot;);
displayTeamNameElement.classList.add(&quot;team-name&quot;, &quot;right&quot;);
displayTeamNameElement.textContent = displayTeamName;
const scoreElement = document.createElement(&quot;div&quot;);
scoreElement.classList.add(&quot;score&quot;);
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(&quot;div&quot;);
pointsElement.classList.add(&quot;points&quot;);
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: &#39;Montserrat&#39;, 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 -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月11日 03:19:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76878749.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定