当试图访问数组中的数组时， fetch请求显示未定义(svelte)

Question

当我试图从API访问这些数据时，我很难理解我错过了什么，我试图访问的数据是数组中的数组，但当我试图访问它时，它会显示我[object, object]或undefined。

svelte store

import { writable } from "svelte/store";
export const leagueStandings = writable([]);
const fetchStandings= async () => { 
const url = 'https://soccer.sportmonks.com/api/v2.0/standings/season/17420?api_token=API_KEY';
const res = await fetch(url); 
const data = await res.json();
leagueStandings.set(data.data);
} 
fetchStandings();

苗条的组件

<script>
import {leagueStandings} from "../../stores/league-standings-stores"
console.log(leagueStandings)
let tablePositions = leagueStandings.map($leagueStandings => $leagueStandings.standings)
console.log(tablePositions)
</script>

{#each tablePositions as tablePosition}
<h2>{tablePosition.position}</h2>
{/each}

API与，我试图得到我的数据从"站"。我可以在console.log()中显示内容，但实际上不能访问值:(

{
"data": [
{
"id": 77448322,
"name": "Regular Season",
"league_id": 8,
"season_id": 17420,
"round_id": 202038,
"round_name": 38,
"type": "Group Stage",
"stage_id": 77448322,
"stage_name": "Regular Season",
"resource": "stage",
"standings": {
"data": [
{
"position": 1,
"team_id": 9,
"team_name": "Manchester City",
"round_id": 202038,
"round_name": 38,
"group_id": null,
"group_name": null,
"overall": {
"games_played": 38,
"won": 27,
"draw": 5,
"lost": 6,
"goals_scored": 83,
"goals_against": 32,
"points": 86
},
"home": {
"games_played": 19,
"won": 13,
"draw": 2,
"lost": 4,
"goals_scored": 43,
"goals_against": 17,
"points": 41
},
"away": {
"games_played": 19,
"won": 14,
"draw": 3,
"lost": 2,
"goals_scored": 40,
"goals_against": 15,
"points": 45
},
"total": {
"goal_difference": "51",
"points": 86
},
"result": "UEFA Champions League",
"points": 86,
"recent_form": "WLWLW",
"status": null
},

Answer 1

standings属性是一个具有属性data的对象，它是一个数组，但您似乎没有考虑到这样的结构。

如果您想将所有standings.data数组平铺成单个列表，请尝试以下操作:

const tablePositions = leagueStandings.flatMap(
({ standings: { data } }) => data
);