ingrese la descripción de la imagen aquí El problema es que los objetos de la API no se están procesando en HTML, ¿qué hice mal?
<button onclick = "showCountries()">Show Countries</button> <div id = "feed"></div> <script> function showCountries(){ let xhr = new XMLHttpRequest() xhr.open('GET', 'https://restcountries.com/v3.1/all', true) xhr.onload = function(){ if(xhr.status == 200){ console.log('success') let countries = JSON.parse(this.response) countries.forEach(country=>{ const countryCard = document.createElement('div') const countryCardImage = document.createElement('img') countryCard.innerHTML = country.name countryCardImage.src = country.flag document.getElementById('feed').appendChild(countryCard) }) } } xhr.send() } </script>Finalmente descubrí cómo mostrar banderas, aquí está la fuente:
function showCountries(){ let xhr = new XMLHttpRequest() xhr.open('GET', 'https://restcountries.com/v3.1/all', true) xhr.onload = function(){ if(xhr.status == 200){ console.log('success') let countries = JSON.parse(this.response) countries.forEach(country=>{ const countryCard = document.createElement('div') const countryCardImage = document.createElement('div')// must be div to display small image countryCard.innerHTML = country.name.common countryCardImage.innerHTML = country.flag console.log(country.flag) document.getElementById('feed').appendChild(countryCard) document.getElementById('feed').appendChild(countryCardImage) //this is it! }) } }Porque country.name es un objeto. Debe usar una cadena para establecer el HTML interno del elemento. De acuerdo con la estructura de datos de su respuesta, puede usarlo así:
function showCountries() { let xhr = new XMLHttpRequest() xhr.open('GET', 'https://restcountries.com/v3.1/all', true) xhr.onload = function() { if (xhr.status == 200) { console.log('success') let countries = JSON.parse(this.response) countries.forEach(country => { const countryCard = document.createElement('div') const countryCardImage = document.createElement('img') countryCard.innerHTML = country.name.common countryCardImage.src = country.flags.png countryCardImage.style.width = "30px" countryCard.append(countryCardImage) document.getElementById('feed').appendChild(countryCard) }) } } xhr.send() } <button onclick="showCountries()">Show Countries</button> <div id="feed"></div>