Что я должен поставить перед циклом forEach, который должен проходить через функцию? JavaScript

Решение (с новыми ключевыми словами async/await)

async function getCountries(){
    const search = document.querySelector('.search').value;
    const response = await fetch(`https://restcountries.com/v3.1/lang/${search}`,{
        method: "GET",
    });

    const data = await response.json();

    data.forEach(api=> {
        showCountry(api)
    })

}

Решение (с then)

function getCountries(){
    const search = document.querySelector('.search').value
    fetch(`https://restcountries.com/v3.1/lang/${search}`,{
        method: "GET",
    })
    .then((response) => response.json())
    .then((data) => 
       data.forEach(api=> {
         showCountry(api)
       })
    );    
}

Ответ на проблему [object][object], упомянутую в комментарии -

Ваш ответ API data имеет свойства, отличные от того, что вы используете в своем коде.

Обновленный метод -

  
function showCountry(data){
    const country = document.createElement('div')
    country.classList.add('country')
    country.innerHTML =
    `<div class = "country-img">
        <img src = "${data?.flags?.png}" alt = "">
    </div>
    <div class = "country-details">
        <h5 class = "countryName">${data?.name?.common}</h5>
        <p><strong>Population:</strong>${data?.population}</p>
        <p><strong>SubRegion:</strong>${data?.subregion}</p>
        <p><strong>Capital:</strong>${data?.capital}</p>
        <p class = "languageName"><strong>Language:</strong>${data?.languages?.eng}</p>
    </div>`

    countries.appendChild(country)
}

    fetch(`https://restcountries.com/v3.1/lang/${search}`,{
    method: "GET",
    })
    .then((response) => response.json())
    .then(data => {
      data.forEach(api => {
        showCountry(api)
      }
    });

Вместо for/loop, создания элемента DOM, добавления к нему HTML и присоединения его к DOM, карта немного проще в использовании. Вы уже используете строку шаблона для создания HTML-кода, чтобы мы могли его вписать.

Примечание: вы должны посмотреть на ответ JSON, чтобы понять, как он составлен, чтобы вы могли правильно написать свой HTML. Например, data.name не будет работать, потому что name — это объект, содержащий свойство common и свойство official, поэтому вместо этого вам нужно получить одно из этих значений.

В этом примере я использовал async/await, так как его немного легче разбить на части и немного легче читать. Кроме того, я использовал только пару примеров в HTML — flag, common имя и population.

// Cache the countries element
const countries = document.querySelector('.countries');

// Fetch the data. If there's an error in the response throw it,
// otherwise return the parsed JSON
async function getData() {
  const res = await fetch('https://restcountries.com/v3.1/all');
  if (!res.ok) throw new Error(`${res.status}: ${res.statusText}`);
  return res.json();
}

// Accepts the parsed JSON it `map` over that array
// of objects, destructures the properties that will be
// used in the HTML, and returns the HTML for that
// object using a template string. Once the iteration is
// complete join the array of strings `map` returns
// into one single string
function buildCountries(data) {
  return data.map(obj => {

    const {
      name: { common },
      population,
      flag
    } = obj;

    return `
      <section class = "country">
        <h4>${flag} ${common}</h4>
        <p>${population}</p>
      </section>
    `;

  }).join('');
}

// Get the data, get the HTML, and then add the HTML
async function main() {
  try {
    const data = await getData();
    const html = buildCountries(data);
    countries.insertAdjacentHTML('beforeend', html);
  } catch (err) {
    console.error(err.message);
  }
}

main();

.country { background-color: #efefef; padding: 0.25em; border: 1px solid #dfdfdf; }
.country:not(:last-child) { margin-bottom: 0.25em; }
h4 { padding: 0; margin: 0; }

<div class = "countries"></div>

Дополнительная документация

• карта

• Задание на деструктуризацию

• вставкаAdjacentHTML