【问题标题】:How to get data from JSON using Axios如何使用 Axios 从 JSON 中获取数据
【发布时间】:2018-10-12 19:47:46
【问题描述】:

这是我第一次尝试 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

非常感谢任何帮助!

【问题讨论】:

    标签: javascript json reactjs axios gatsby


    【解决方案1】:

    尝试改变

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

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

    或者使用两张地图。

    【讨论】:

    • 好的,这让我更近了一步,我现在可以检索“表”对象的总数,但我仍然无法提取团队 ID、名称和 crestUrl See GraphiQL Image
    【解决方案2】:

    您可以这样做,而不是使用索引位置访问表

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

    【讨论】:

    • 我的地图的其余部分会是什么样子?这是我尝试的方法(gist.github.com/vibrains/b6b6fbde3cbbadecbcce10825077dcf8)(不起作用)
    • 什么不起作用?我在您的代码中注意到的一件事是不正确的。您正在将对象分配给 id。如果要分配怎么办?如果你想分配团队 ID,那么它应该是 t.team.id 而不仅仅是 t
    【解决方案3】:

    不太确定您想要这些数据的方式,因为我对 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);

    【讨论】:

    • 嘿,谢谢,就在 GraphiQL 中查看排名而言,使用 2 个地图是有效的。现在,如何在第二张地图中映射团队名称和 crestURL?我会做这样的事情吗? table: team.table.map(data=>{ position: data.position team: data.team.name })
    猜你喜欢
    • 2018-01-17
    • 2020-06-28
    • 2019-07-14
    • 2019-07-03
    • 2020-06-14
    • 2023-03-23
    • 2021-09-05
    • 2021-11-02
    • 1970-01-01
    相关资源
    最近更新 更多