如何从 GitHub 获取 API 数组的所有“项目”？答案

【问题标题】：How to get all the 'items' of an API array from GitHub?如何从 GitHub 获取 API 数组的所有“项目”？
【发布时间】：2020-07-21 10:51:32
【问题描述】：

我正在尝试获取存储库列表，即我的代码使用过滤器搜索存储库

Javascript 得到一个结果，其中包含多个项目，其中包含每个存储库的数据，这些数据使用 URL：https://api.github.com/search/repositories?q=piccolowen+in:name 进行过滤。

我可以使用console.log(result.items[0].name) 来获取第一个存储库的name 值，但我想从打印到控制台的搜索中获取所有存储库。我还希望代码能够打印所有存储库及其值，无论有多少存储库适合过滤器。

这是我要添加到的当前代码：

window.onload = func()
    async function func() {
        const url = 'https://api.github.com/search/repositories?q=piccolowen+in:name'
        const response = await fetch(url);
        const result = await response.json();
        const apiresult = document.getElementById('thisisanid') 
        console.log(result)
}

关于如何做到这一点的任何想法？

编辑：我使用这个问题的while循环找到了我的问题的答案：Get total number of items on Json object?

const resultLength = Object.keys(result.items).length
var arrnum = 0
while (arrnum < resultLength) {
//execute code
}

编辑 2：我之前编辑的代码会使页面崩溃。仍在为这个巨大的错误寻找解决方案。

【问题讨论】：

标签： javascript async-await github-api

【解决方案1】：

由于results.items返回一个对象数组，您可以使用Array.prototype.map返回所有项目名称，即：

result.items.map(item => item.name)

如果你想简单地过滤掉一些属性，你也可以做object destructuring。假设您想要一个仅包含 name、id 和 description 的项目数组，那么您可以这样做：

result.items.map(({ name, id, description }) => ({ name, id, description }))

async function func() {
  const url = 'https://api.github.com/search/repositories?q=piccolowen+in:name'
  const response = await fetch(url);
  const result = await response.json();

  // Returns an array of item names
  console.log(result.items.map(item => item.name));

  // Returns an array of object with selected keys
  console.log(result.items.map(({ name, id, description }) => ({ name, id, description })));
}

func();

【讨论】：

【解决方案2】：

数组有map function，它接受一个回调函数。它遍历所有元素并调用回调函数并将数据推送到新创建的数组。

map() 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。

更多： Array.map

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

window.load = main();
const nameMapper = (item) => item.name;
const liMapper = (item) => `<li>${item.name}</li>`;
async function main() {
  const url = "https://api.github.com/search/repositories?q=piccolowen+in:name";
  const result = await fetch(url).then((x) => x.json());
  const names = result.items.map(nameMapper);
  const apiresult = document.getElementById("thisisanid");
  apiresult.textContent = names;

  const ul = document.getElementById("list");
  ul.innerHTML = result.items.map(liMapper).join("");
}

#list li{
  list-style: none;
  padding: 5px 10px;
  border: 1px solid black;
  max-width: 400px;
}

    <div id="thisisanid"></div>
    <ul id="list">
    </ul>

【讨论】：

【解决方案3】：

你可以用like！

let list = document.getElementById('list');
let htmlTemplate = result.items.map(function(item) {
   return item.name
}).join("")

list.insertAdjacentHTML('beforeend', htmlTemplate)

或者你可以使用模板文字敌人的例子当您在 items.map() 中返回值时

return `${item.id}: ${item.name}`

【讨论】：