How to get data from JSON using Axios

Question

This is my first stab at Gatsby and Axios in order to get some json from an API.

Basically, I'm trying to retrieve some json data from this json file:

{
"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
       ]
     }
   ]
 }

Here is my what I'm using to map the data:

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

My question is, how do I map the "table" child of "standings" in my code? When I try to query in GraphiQL I can't seem to be able to drill down to the table data, I can only fetch stage and type from the json data (see below image)

GraphiQL example

Any help is much appreciated!

Answer 1

Try changing

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

to

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

or use two maps.

Answer 2

You can do this instead of accessing table with index position

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

    });
});

Answer 3

Not really sure how you want this data, as I am not that experienced with GraphQL, however as mentioned above, you need to use a second map. The standings table is actually an array. See the code below:

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