我应该在forEach循环之前放置什么，它应该循环通过一个函数？javascript

taor4pac 于 2022-11-27 发布在 Java

关注(0)|答案(3)|浏览(125)

我正在做一个项目在javascript与API从restCountries https://restcountries.com/#rest-countries-v3-vs-v31我想创建一个forEach循环，我可以循环通过的结果，并创建什么在函数showCountry（），但我不知道我应该放在前面的forEach循环？什么可以相关？提前感谢！

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 class="country-img">
        <img src="${data.flag}" alt="">
    </div>
    <div class="country-details">
        <h5 class="countryName">${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 class="languageName"><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/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Countries</title>
</head>
<body>
    <div class="container">
        <h1>Search country by language!</h1>
    </div>
    <div class="container">
        <div class="controls">
            <i class="bx bx-search"></i>
            <input type="text" placeholder="search by language.." id="search" class="search">
        </div>
        <button id="btn" onclick="getCountries()">Search Country</button>
    </div>
    <div class="countries">
        
    </div>
    <script src="script.js"></script>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/74585386/what-should-i-put-before-the-foreach-loop-that-should-loop-through-a-function-j

3条答案

按热度按时间

swvgeqrz1#

解决方案（使用新的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)
       })
    );    
}

对评论中提到的[对象][对象]问题的回答-
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)
}

赞(0）回复(0）举报 2022-11-27

6tdlim6h2#

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

赞(0）回复(0）举报 2022-11-27

zbdgwd5y3#

x1e0 f1 a比for/loop更简单，它创建一个DOM元素，向其中添加HTML，并将其附加到DOM。您已经使用了一个模板字符串来创建HTML，因此我们可以将其正确地添加进去。
注意：你应该看一下JSON响应，了解它是如何组合在一起的，这样你才能正确地编写HTML。例如，data.name将无法工作，因为name是一个包含common属性和official属性的 object，所以你需要获取其中的一个值。
我在这个例子中使用了async/await，因为它更容易分解代码，也更容易阅读。另外，我在HTML中只使用了几个例子-flag、common名称和population。
第一个
其他文件

赞(0）回复(0）举报 2022-11-27

我来回答

我应该在forEach循环之前放置什么，它应该循环通过一个函数？javascript

3条答案

相关问题

热门标签

最新问答