javascript - 循环 API 数据并使用 JavaScript 在 DOM 中显示多个搜索项
问题描述
我正在尝试使用https://restcountries.eu/ API 和 axios设置搜索 API 应用程序。
我已经设法按照我的意愿在 DOM 中显示所有内容。但是,如果我搜索“United”或仅包含部分名称的内容。它要么显示未定义,要么如果我循环它只会显示最后一个搜索项。我想根据我输入的任何搜索条件将所有搜索项带入 DOM。
下面是 HTML:
<body>
<div class="search-container">
<form id="form" class="form">
<input type="text" id="search" placeholder="Search for country..." />
</form>
</div>
<main id="main">
<div id="map" class="google-map"></div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="script.js"></script>
</body>
</html>
这是JS:
const APIURL = 'https://restcountries.eu/rest/v2/name/'
// const GOOGLE_MAPS_API = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDhlU1KMTlTh4C__bTJBxbVA-s7wvQbO9E&callback=initMap'
const main = document.getElementById('main')
const form = document.getElementById('form')
const search = document.getElementById('search')
async function getCountryData(name) {
try {
const { data } = await axios.get(APIURL + name)
data.forEach(res => {
let countryArr = res
createCountryCard(countryArr)
} )
} catch (err) {
if(err.response.status == 404) {
createErrorCard('No countries found')
setTimeout(() => {
main.innerHTML = ''}
, 1500);
}
}
}
function createCountryCard(country) {
const cardHTML = `
<div class="content-container">
<div class="card">
<div class="wrapper">
<div class="card-title">
<h2>${country.name}</h2>
<h4>Capital: ${country.capital}</h4>
<h5>Population: ${country.population.toLocaleString('en')}</h5>
</div>
<div class="card-image">
<img
src="${country.flag}"
alt="${country.name +'-flag'}"
/>
</div>
</div>
<div class="wrapper">
<div class="map-content">
<div id="map" class="google-map"></div>
</div>
<div class="card-content">
<ul class="card-list">
<li><strong>Region:</strong> ${country.region}</li>
<li><strong>Subregion:</strong> ${country.subregion}</li>
<li><strong>Currency:</strong> ${country.currencies[0].name}<span> ${country.currencies[0].symbol}</span></li>
<li><strong>Spoken Language:</strong> ${country.languages[0].name}</li>
<li><strong>Timezone:</strong> ${country.timezones}</li>
</ul>
</div>
</div>
</div>
</div>
`
main.innerHTML = cardHTML
console.log(country)
}
function createErrorCard(msg) {
const cardHTML = `
<div class="card">
<h1>${msg}</h1>
</div>
`
main.innerHTML = cardHTML
}
// Search Input
form.addEventListener('submit', (e) => {
e.preventDefault()
const countryName = search.value
if(countryName) {
getCountryData(countryName)
search.value = ''
}
})
任何帮助将非常感激。谢谢
解决方案
main.innerHTML = cardHTML
函数中的行在每次循环迭代时createCountryCard()
覆盖元素的内容。#main
这就是为什么您只能从搜索结果中获得最后一项。尝试将其更改为main.innerHTML += cardHTML
.
推荐阅读
- python - DBT 和 Liquibase(创建表)
- c# - 将图像移动到剪贴板不起作用c#
- c# - C# 将物理文件转换为 iformfile
- python-3.x - ValueError 尽管尝试和除外
- python - Python中是否有一种简单的方法可以在不知道扩展名的情况下按名称获取文件?
- c++ - 用于循环编译的 constexpr
- storekit - 通过 productsRequest:didReceiveResponse 返回的 SKProduct 在生产中没有 .introductoryPrice,但沙盒符合预期
- html - 图像拟合不正确
- python - unittest,在本地工作,但不在远程服务器上,没有名为 x.__main__ 的模块;'x' 是一个包,不能直接执行
- javascript - axios获取请求不改变对应后端