如何從 GitHub 獲取 API 陣列的所有“項目”？

Question

我正在嘗試獲取存儲庫列表，即我的代碼使用過濾器搜索存儲庫

The Javascript gets a result, with multiple items that contain the data for each repository that fit the filter using the 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：我之前編輯中的代碼會使頁面崩潰。 仍在為這個巨大的錯誤尋找解決方案。

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

Answer 2

該數組有map function ，它接受一個回調 function。 它遍歷所有元素並調用回調 function 並將數據推送到新創建的數組。

map() 方法創建一個新數組，其中填充了在調用數組中的每個元素上調用提供的 function 的結果。

更多： 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>

Answer 3

你可以用喜歡！

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