what should I put before the forEach loop that should loop through a function? javascript-CodePudding

Im doing a project in javascript with API from restCountries https://restcountries.com/#rest-countries-v3-vs-v31 I want to create a forEach loop where I can loop through the result and create whats in the function showCountry() But I dont know what I should put before in the forEach loop? What can be relevant? Thanks in Advance!

const countries = document.querySelector('.countries')
const lang = document.getElementById('search').value
const btn = document.getElementById('btn')

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

}
    
function showCountry(data){
    const country = document.createElement('div')
    country.classList.add('country')
    country.innerHTML =
    `<div >
        <img src="${data.flag}" alt="">
    </div>
    <div >
        <h5 >${data.name}</h5>
        <p><strong>Population:</strong>${data.population}</p>
        <p><strong>SubRegion:</strong>${data.subregion}</p>
        <p><strong>Capital:</strong>${data.capital}</p>
        <p ><strong>Language:</strong>${data.lang}</p>
    </div>`

    countries.appendChild(country)
}

Html;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Countries</title>
</head>
<body>
    <div >
        <h1>Search country by language!</h1>
    </div>
    <div >
        <div >
            <i ></i>
            <input type="text" placeholder="search by language.." id="search" >
        </div>
        <button id="btn" onclick="getCountries()">Search Country</button>
    </div>
    <div >
        
    </div>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

Solution (with new async/await keywords)

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

}

Solution (with 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)
       })
    );    
}

CodePudding user response：

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