Github API punch card data transformation

Question

I want to create a graph that displays the information provided by the Github PunchCard in a similar way as this python script, but with JavaScript instead, using D3.js. I retrieve the information from the Github API this way using GET /repos/:owner/:repo/stats/punch_card

Right now I am stuck with how to modify the response to gather the data and classify it by day / hour, but apparently I cannot access the Array. My code, so far, is as follows:

const showGithubData = (user, repo) => {
    console.log(`Querying user  ${user} and repo ${repo}`);
    fetchPunchCard(repoUser.value, repoName.value).then((res) => {
        console.log(res);         
    })
};

const fetchPunchCard = async (username, repository) => {
   /*  GET / repos /: owner /: repo / stats / punch_card */
    const url = `https://api.github.com/repos/${username}/${repository}/stats/punch_card`;

    const api_call = await fetch(url);

    const data = await api_call.json();
    return { data }
};

I return the correct values but then I cannot access them, in the same function. If in showGithubData() I do console.log(res[0]) it says undefined, however, when doing console.log(res) I can see it returns an Array of Arrays(3), like this:

{data: Array(168)}
data: Array(168)
[0 … 99]
    0: Array(3)
        0: 0
        1: 0
        2: 0
      length: 3
      __proto__: Array(0)
    1: (3) [0, 1, 0]
    2: (3) [0, 2, 0]

I want to access all of this positions (0 is day, 1 is hour and 2 is number of commits) to create my charts, but I don't know why I can't.

I really appreciate any help.

When you do `console.log(res)`, are you doing that directly into the console? — OliverRadini, Nov 14 '18 at 13:59
no, I just run the function and see what the console.log does, i don't call it from the console itself. I run it in a server (everything is working within a webpage) — Marta Lobo, Nov 14 '18 at 15:14
Ah, ok; are you able to show the code where the successful `console.log` is happening? — OliverRadini, Nov 14 '18 at 15:31
Sorry @OliverRadini if I didn't explain myself. The functions above are the ones called. I have a button in a website with an eventListener, and after typing the user and the repo I want to retrieve the info from, the function showGithubData() is called. Inside of it is fetchPunchCard, that returns a response with an array of arrays (as displayed in the second code chunck). I want now to access this array and filter the information to organise it by day / hour to create a bar chart. — Marta Lobo, Nov 14 '18 at 15:38
No need to apologise; thanks for clarifying that further. You mention, though, that "when doing console.log(res) I can see it returns an Array of Arrays(3)"; I was wondering where that call is made? — OliverRadini, Nov 14 '18 at 15:42
as you can see in the code above, the console.log(res) is called once the fetchPunchCard function has been executed, using its response. This happens inside of showGithubData, which is triggered by a button and takes two inputs — Marta Lobo, Nov 14 '18 at 15:45

score 1 · Accepted Answer · answered Nov 14 '18 at 16:12

Sometimes, the object we see printed by a console.log is not exact. When I encounter this problem (I can't find my a key that is supposed to be there and I see in a console.log), I follow this 2 steps:

Print the type: To ensure is a json object and not just a string, in this case, it was an objet: console.log(typeof res); > object
Print all keys of the object: sometimes the actual key is not shown but is still there: console.log(Object.keys(res)); > [ 'data' ]

And as you can see, we found our solution with step number 2, the key to access all values is data, so in your case, to access those values we need to do res.data

IE: console.log(res.data[0]); > [ 0, 0, 0 ]

Github API punch card data transformation

1 Answers1