[英]How to get all the 'items' of an API array from GitHub?
I am trying to get a list of repositories, that is my code does a search for repositories with a filter我正在尝试获取存储库列表,即我的代码使用过滤器搜索存储库
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
. 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
.
I can do console.log(result.items[0].name)
to get the first repository's name
value, but I want get all of the repositories from the search printed to the console.我可以执行
console.log(result.items[0].name)
来获取第一个存储库的name
值,但我想从打印到控制台的搜索中获取所有存储库。 I also want the code to be able to print all of the repositories and their values no matter how many repos fit the filter.我还希望代码能够打印所有存储库及其值,无论有多少存储库适合过滤器。
Here is the current code I want to add on to:这是我要添加到的当前代码:
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)
}
Any ideas on how I could do this?关于我如何做到这一点的任何想法?
EDIT: I found the answer to my problem using a while loop from this question: Get total number of items on Json object?编辑:我使用这个问题的while循环找到了我的问题的答案: Get total number of items on Json object?
const resultLength = Object.keys(result.items).length
var arrnum = 0
while (arrnum < resultLength) {
//execute code
}
EDIT 2: The code in my previous edit will crash a page.编辑 2:我之前编辑中的代码会使页面崩溃。 Still working on a solution for this huge bug.
仍在为这个巨大的错误寻找解决方案。
Since results.items
returns an array of objects, you can use Array.prototype.map
to return all the item names, ie:由于
results.items
返回一个对象数组,您可以使用Array.prototype.map
返回所有项目名称,即:
result.items.map(item => item.name)
If you want to simply filter out some properties, you can also do object destructuring .如果你想简单地过滤掉一些属性,你也可以做object destructuring 。 Let's say you want an array of items that only contain their
name
, id
, and description
, then you can do this:假设您想要一个仅包含其
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();
The array has map function
, which accepts a callback function.该数组有
map function
,它接受一个回调 function。 It iterate through all the elements and call the callback function and push data to the newly created array.它遍历所有元素并调用回调 function 并将数据推送到新创建的数组。
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
map() 方法创建一个新数组,其中填充了在调用数组中的每个元素上调用提供的 function 的结果。
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>
You can use like!你可以用喜欢!
let list = document.getElementById('list');
let htmlTemplate = result.items.map(function(item) {
return item.name
}).join("")
list.insertAdjacentHTML('beforeend', htmlTemplate)
or you can use template literal foe example when you returning value in items.map()或者您可以在 items.map() 中返回值时使用模板文字敌人示例
return `${item.id}: ${item.name}`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.