如何使用Axios从JSON获取数据

时间:2018-10-12 19:47:47

标签: javascript json reactjs axios gatsby

这是我在Gatsby和Axios的第一次尝试,目的是从API中获取一些json。

基本上,我正在尝试从此json文件中检索一些json数据:

{
"filters": {},
"competition": {
    "id": 2019,
    "area": {
        "id": 2114,
        "name": "Italy"
    },
    "name": "Serie A",
    "code": "SA",
    "plan": "TIER_ONE",
    "lastUpdated": "2018-10-08T15:10:08Z"
},
"season": {
    "id": 290,
    "startDate": "2018-08-18",
    "endDate": "2019-05-26",
    "currentMatchday": 9,
    "winner": null
},
"standings": [
    {
        "stage": "REGULAR_SEASON",
        "type": "TOTAL",
        "group": null,
        "table": [
            {
                "position": 1,
                "team": {
                    "id": 109,
                    "name": "Juventus FC",
                    "crestUrl": "http://upload.wikimedia.org/wikipedia/de/d/d2/Juventus_Turin.svg"
                },
                "playedGames": 8,
                "won": 8,
                "draw": 0,
                "lost": 0,
                "points": 24,
                "goalsFor": 18,
                "goalsAgainst": 5,
                "goalDifference": 13
       ]
     }
   ]
 }

这是我用来映射数据的内容:

team.data.standings.map((team, i) => {
const standingsNode = {
id: `${i}`,
parent: `__SOURCE__`,
internal: {
  type: `Season`,
},
children: [],

stage: team.stage,
type: team.type,
}

 const contentDigest = crypto
.createHash(`md5`)
.update(JSON.stringify(standingsNode))
.digest(`hex`);
standingsNode.internal.contentDigest = contentDigest;

createNode(standingsNode);
});

我的问题是,如何在代码中映射“积分”的“表”子级? 当我尝试在GraphiQL中查询时,我似乎无法向下钻取表数据,我只能从json数据中获取阶段和类型(请参见下图)

GraphiQL example

非常感谢您的帮助!

3 个答案:

答案 0 :(得分:0)

尝试更改

team.data.standings.map((team, i) => {

team.data.standings[0].table.map((team, i) => {

或使用两张地图。

答案 1 :(得分:0)

您可以执行此操作,而不用访问具有索引位置的表

team.data.standings.map((team, i) => {
    team.table.map((t, index) => {

    });
});

答案 2 :(得分:0)

由于我对GraphQL并不熟悉,因此不确定是否要使用此数据,但是如上所述,您需要使用第二张地图。排行榜表实际上是一个数组。 请参见下面的代码:

let team = {
    "filters": {},
    "competition": {
        "id": 2019,
        "area": {
            "id": 2114,
            "name": "Italy"
        },
        "name": "Serie A",
        "code": "SA",
        "plan": "TIER_ONE",
        "lastUpdated": "2018-10-08T15:10:08Z"
    },
    "season": {
        "id": 290,
        "startDate": "2018-08-18",
        "endDate": "2019-05-26",
        "currentMatchday": 9,
        "winner": null
    },
    "standings": [
        {
            "stage": "REGULAR_SEASON",
            "type": "TOTAL",
            "group": null,
            "table": [
                {
                    "position": 1,
                    "team": {
                        "id": 109,
                        "name": "Juventus FC",
                        "crestUrl": "http://upload.wikimedia.org/wikipedia/de/d/d2/Juventus_Turin.svg"
                    },
                    "playedGames": 8,
                    "won": 8,
                    "draw": 0,
                    "lost": 0,
                    "points": 24,
                    "goalsFor": 18,
                    "goalsAgainst": 5,
                    "goalDifference": 13
                }
           ]
         }
       ]
    }

let teamData = team.standings.map((team, i) => {
     const standingsNode = {
        id: `${i}`,
        parent: `__SOURCE__`,
        internal: {
          type: `Season`,
        },
        children: [],
        
        stage: team.stage,
        type: team.type,
        table: team.table.map(data=>{
        return {
            position: data.position,
            team: data.team.name,
            crestUrl: data.team.crestUrl

        };
    })
        
            
        
        }
     return standingsNode;
       });
console.log(teamData);