Как получить данные после нажатия кнопки и ограничить количество выборок

Question

Я хотел бы использовать SWAPI (https://swapi.co/) для извлечения данных, я создал нижеприведенный код, но меня беспокоит, что я использую слишком много выборок - из-за неправильной архитектуры.

План такой: 1-й выбор базы данных (создание кнопок из них), затем нажмите кнопку и выберите данные с другого URL-адреса и отобразите их (когда показываются ссылки, также измените их на кнопки)

Я создал кнопки и получилданные (на данный момент console.log их)

//get the base list of attributes
let mainContent = document.getElementById('mainContent'); // div with id=mainContent
let mainList = new Map();
let mainUrl = fetch('https://swapi.co/api/'); //base URL

mainUrl
  .then(response => response.json())
  .then(list => {
    for (let main in list) {
      mainList.set(main, list[main]);
    }
    mainList.forEach((value, key) => {
      createButton(value, key);
    });
  })
  .catch(err => console.error('Caught error: ', err));

let createButton = (value, key) => {
  let button = document.createElement('button');
  button.setAttribute('name', key);
  button.setAttribute('value', value);
  button.innerHTML = key;
  button.addEventListener('click', e => {
    console.log(e.target.value);
    return fetch(e.target.value)
      .then(response => response.json())
      .then(resp => {
         console.log(resp.results);
      });
  });
  mainContent.appendChild(button);
};

Я рассчитываю перечислить людей и т. д. по URL-адресам, по которым щелкнули, но я ожидал бы использовать меньше выборок