如何从GitHub获取API数组的所有'items'？

14 浏览
0 Comments

如何从GitHub获取API数组的所有'items'？

我正在尝试获取一个仓库列表，也就是我的代码通过筛选搜索仓库。

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) {
//执行代码
}

编辑2：

我之前编辑的代码会导致页面崩溃。我仍在解决这个严重的错误的问题。

0

3 答案

0 Comments

如何从GitHub的API数组中获取所有的'items'？

问题的原因是该数组具有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]

在给定的代码示例中，我们可以看到如何使用Array.map方法从一个数组中获取所有的'items'。首先，我们使用fetch函数从GitHub的API获取数据。然后，我们使用map函数将'name'属性提取出来，并存储在一个新数组中。最后，我们将这些'name'显示在页面上，并将它们包装在li元素中。

以下是解决问题所需的完整代码：

window.load = main();
const nameMapper = (item) => item.name;
const liMapper = (item) => `
  • ${item.name}
    • `;
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("");
}

    此外，我们还提供了一些附加的CSS和HTML代码，以帮助在页面上显示结果。

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

    通过使用上述代码，我们可以成功地从GitHub的API数组中获取所有的'items'。

    0
    0 Comments

    如何从GitHub获取API数组的所有“items”？

    问题的原因：你想从GitHub的API数组中获取所有的“items”。

    解决方法1：使用像下面这样的方法：

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

    解决方法2：使用模板字面量，例如在返回items.map()的值时：

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

    以上是获取GitHub API数组中所有“items”的两种解决方法。

    0
    0 Comments

    如何从GitHub获取API数组的所有“items”？

    在GitHub上，我们可以通过API获取一个包含“items”的数组。如果我们需要从这个数组中获取所有的“items”，可以使用Array.prototype.map()方法来实现。具体代码如下：

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

    如果我们只需要筛选出一些特定的属性，也可以使用对象解构语法来实现。比如我们只需要包含“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();

    // 返回一个包含所有项目名称的数组

    console.log(result.items.map(item => item.name));

    // 返回一个包含选定键的对象数组

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

    }

    func();

    0