Блог

Главная - Вопросы по программированию - Цикл по данным API и отображение нескольких элементов поиска в DOM с помощью JavaScript

Цикл по данным API и отображение нескольких элементов поиска в DOM с помощью JavaScript

#javascript #api #async-await #axios #dom-events

#javascript #API #асинхронный-ожидание #аксиос #dom-события

Вопрос:

Я пытаюсь настроить приложение search API, используя https://restcountries.eu / API и axios.

Мне удалось отобразить все в DOM, как я хочу. Однако, если я буду искать «Юнайтед» или что-то, имеющее только часть названия. Он либо отображает undefined, либо, если я выполняю цикл, он будет отображать только последний элемент поиска. Я хотел бы перенести все элементы поиска в 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-s7wvQbO9Eamp;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 = ''
    }
})

Любая помощь была бы очень признательна.
Спасибо

Комментарии:

1. Это происходит потому, что вы перезаписываете innerHTML with main.innerHTML = cardHTML каждый createCountryCard() раз, когда вызывается. Все, что вам нужно сделать, это добавить вместо этого карточку страны

Ответ №1:

main.innerHTML = cardHTML строка в createCountryCard() функции перезаписывает содержимое #main элемента с каждой итерацией цикла. Вот почему вы получаете только последний элемент из результатов поиска. Попробуйте изменить его на main.innerHTML = cardHTML .