Как получить все «элементы» массива API из GitHub?

Question

Я пытаюсь получить список репозиториев, то есть мой код выполняет поиск репозиториев с фильтром

. 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)
}

Любые идеи о том, как я мог бы сделать это?

РЕДАКТИРОВАТЬ: я нашел ответ на мою проблему, используя некоторое время l oop из этого вопроса: Получить общее количество элементов на Json объект?

const resultLength = Object.keys(result.items).length
var arrnum = 0
while (arrnum < resultLength) {
//execute code
}

РЕДАКТИРОВАТЬ 2: код в моем предыдущем редактировании будет sh страницу. Все еще работаем над решением этой огромной ошибки.

Answer 1

Поскольку results.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();

  // 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

Вы можете использовать как!

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

list.insertAdjacentHTML('beforeend', htmlTemplate)

или вы можете использовать шаблонный шаблон foe, например, при возврате значения в items.map ()

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

Answer 3

Массив имеет map function, который принимает функцию обратного вызова. Он перебирает все элементы и вызывает функцию обратного вызова и данные pu sh для вновь созданного массива.

Метод map () создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

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>