Github API 打卡数据改造

Question

我想使用 GET /repos/:owner/:repo/stats/punch_card

创建一个图表，以与 this python script, but with JavaScript instead, using D3.js. I retrieve the information from the Github API this way 类似的方式显示 Github PunchCard 提供的信息

现在我被困在如何修改响应以收集数据并按天/小时分类，但显然我无法访问数组。到目前为止，我的代码如下：

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

我 return 正确的值，但我无法在同一个函数中访问它们。如果在 showGithubData() 中我做 console.log(res[0]) 它说 undefined，然而，当做 console.log(res)我可以看到它 return 是一个 Array of Arrays(3)，像这样：

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

我想访问所有这些位置（0 是天，1 是小时，2 是提交次数）来创建我的图表，但我不知道为什么我不能。

非常感谢任何帮助。

Answer 1

有时候，我们看到的console.log打印出来的对象并不准确。当我遇到这个问题时（我找不到我应该在那里的钥匙，但我在 console.log 中看到了），我遵循以下两个步骤：

打印类型：确保是一个json对象而不仅仅是一个字符串，在本例中，它是一个对象：console.log(typeof res); > object
打印对象的所有键：有时实际键没有显示但仍然存在：console.log(Object.keys(res)); > [ 'data' ]

如您所见，我们在第 2 步找到了解决方案，访问所有值的关键是 data，因此在您的情况下，要访问这些值，我们需要执行 res.data

即：console.log(res.data[0]); > [ 0, 0, 0 ]

Github API 打卡数据改造

Github API punch card data transformation

javascript

arrays

json

fetch

github-api