按嵌套字段使用Astro排序

Question

给定下面的JSON响应，我将如何首先根据团队，然后按年，使用javascript和/或jsx来映射响应？我在用阿童木。

{
  "data": [
    {
      "id": 1,
      "team_name": "Team One",
      "players": [
        {
          "player_name": "Mickey Mantle",
          "players_year": {
            "year": 2024
          }
        },
        {
          "player_name": "Larry Smalls",
          "players_year": {
            "year": 2022
          }
        },
        {
          "player_name": "Ron Davis",
          "players_year": {
            "year": 2024
          }
        }
      ]
    },
    {
      "id": 2,
      "team_name": "Team Two",
      "players": [
        {
          "player_name": "Jim Abbot",
          "players_year": {
            "year": 2022
          }
        }
      ]
    }
  ]
}

最终结果- HTML输出应该与以下内容相匹配：

<div class="group">
  <h2>Team One</h2>
  <h3>2022</h3>
  <ul>
    <li>Larry Smalls</li>
  </ul>

  <h3>2024</h3>
  <ul>
    <li>Mickey Mantle</li>
    <li>Ron Davis</li>
  </ul>
</div>

<div class="group">
  <h2>Team Two</h2>
  <h3>2022</h3>
  <ul>
    <li>Jim Abbot</li>
  </ul>
</div>

目前，这是我的文件，它可以工作，但没有分组，如上图所示。在Astro的前端和页面正文中需要哪些额外的javascript？

teams.astro

---
const directus = await getDirectusClient()

const response = await directus.items("teams").readByQuery({
    fields: [
        "id",
        "team_name",
        "players.player_name",
        "players.players_year.year",
    ],
})

const formattedResponse = response.data.map((team) => {
    return {
        ...team,
        yearsArr: team.players.map(player => player.players_year.year)
    }
})

const [...teams] = formattedResponse
---

<h1>Teams Page</h1>
{
  teams.map((team) => {
    return (
      <div class='group'>
        <h2>{team.team_name}</h2>
        <ul>
          {team.players.map((player) => (
            <li>
              {player.player_name} ({player.players_year.year})
            </li>
          ))}
        </ul>
      </div>
    )
  })
}

Answer 1

这个问题已经问过很多次了。但不完全是这样。

Update:添加了html标记(用于天文)。

​

var obj = {data:[{id:1,team_name:"Team One",players:[{player_name:"Mickey Mantle",players_year:{year:2024}},{player_name:"Larry Smalls",players_year:{year:2022}},{player_name:"Ron Davis",players_year:{year:2024}}]},{id:2,team_name:"Team Two",players:[{player_name:"Jim Abbot",players_year:{year:2022}}]}]};

var result = {};
obj.data.forEach(function(item) {
  result[item.team_name] = result[item.team_name] || {}
  item.players.forEach(function(player) {
    result[item.team_name][player.players_year.year] = result[item.team_name][player.players_year.year] || [];
    result[item.team_name][player.players_year.year].push(player.player_name);
  })
})
console.log(result)

.as-console-wrapper {
  max-height: 100% !important
}

<h1>Teams Page</h1>
{Object.entries(result).map(([team_name, team]) => { return (
<div class='group'>
    <h2>{team_name}</h2>

    {Object.entries(team).map(([year, players]) => (
    <h3>{year}</h3>
    <ul>
        {players.map(player_name) => (
        <li>
            {player_name}
        </li>
        )}
    </ul>
    ))}

</div>
) }) }

​