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.

score 1 · Accepted Answer · answered Apr 08 '20 at 22:01

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

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

score 0 · Answer 2 · answered Apr 08 '20 at 22:21

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>

score 0 · Answer 3 · answered Apr 08 '20 at 22:37

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

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

3 Answers3