How to get all the 'items' of an API array from GitHub?

Question

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 .

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. 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?

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. Still working on a solution for this huge bug.

Answer 1

Since results.items returns an array of objects, you can use Array.prototype.map to return all the item names, ie:

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

If you want to simply filter out some properties, you can also do object destructuring . Let's say you want an array of items that only contain their name , id , and description , then you can do this:

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

The array has map function , which accepts a callback function. It iterate through all the elements and call the callback function and push data to the newly created array.

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

More: 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

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

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