Estoy haciendo una llamada de API a la API de Rescountries. Cuando abro la consola. Recibo el siguiente error "Error al cargar el recurso: el servidor respondió con un estado de 404 (No encontrado)". Sin embargo, parece que estoy obteniendo un objeto impreso en la consola que proviene de la API del resto de los países a través de "console.log ( Linea de datos. ¿Tiene que ver con la API en sí o algo que hice en mi código? Gracias por adelantado.
"use strict"; const btn = document.querySelector(".btn-country"); const countriesContainer = document.querySelector(".countries"); const getCountryData = function (country) { const request = new XMLHttpRequest(); request.open("GET", `https://restcountries.com/v3.1/name/${country}`); request.send(); request.addEventListener("load", function () { const [data] = JSON.parse(this.responseText); console.log(data); const html = `<article class="country"> <img class="country__img" src="${data.flag}"/> <div class="country__data"> <h3 class="country__name">${data.name}</h3> <h4 class="country__region">${data.region}</h4> <p class="country__row"><span>👫</span>${( +data.population / 100000 ).toFixed(1)}</p> <p class="country__row"><span>🗣️</span>${data.languages.eng}</p> <p class="country__row"><span>💰</span>${data.currencies.symbol}</p> </div> </article> `; countriesContainer.insertAdjacentHTML("beforeend", html); countriesContainer.lastElementChild.opacity = 1; }); }; getCountryData("GB"); getCountryData("usa");Tiene un error 404 porque tiene los siguientes divs <img class="country__img" src="🇺🇸"> El atributo src debe ser una URL, no un símbolo. Tiene 2 llamadas, una para el Reino Unido y otra para EE. UU., por lo que tendrá 2 de esas imágenes y aparecerán 2 errores 404 Not found .
Entonces, su línea de código donde produce esta imagen, es decir, <img class="country__img" src="${data.flag}"/> probablemente debería ser <div>${data.flag}</div> o similar.
Ejemplo:
"use strict"; const btn = document.querySelector(".btn-country"); const countriesContainer = document.querySelector(".countries"); const getCountryData = function (country) { const request = new XMLHttpRequest(); request.open("GET", `https://restcountries.com/v3.1/name/${country}`); request.send(); request.addEventListener("load", function () { const [data] = JSON.parse(this.responseText); console.log(data); const html = `<article class="country"> <div class="country__img">${data.flag}</div> <div class="country__data"> <h3 class="country__name">${data.name}</h3> <h4 class="country__region">${data.region}</h4> <p class="country__row"><span>👫</span>${( +data.population / 100000 ).toFixed(1)}</p> <p class="country__row"><span>🗣️</span>${data.languages.eng}</p> <p class="country__row"><span>💰</span>${data.currencies.symbol}</p> </div> </article> `; countriesContainer.insertAdjacentHTML("beforeend", html); countriesContainer.lastElementChild.opacity = 1; }); }; getCountryData("GB"); getCountryData("usa"); <div class="countries"></div>