Estoy consumiendo una API sobre casos de Covid-19 en el mundo y estoy realizando un buscador de países con sus respectivos datos, por medio de Fetch quiero mostrar en la pantalla de el navegador el valor de la propiedad "confirmed" del país que se busco, pero me aparece en la consola el error TypeError: json.forEach is not a function at HTMLDocument, entiendo que esta fallando porque el metodo forEach es para Arrays y en este caso la API me regresa un objeto, entonces que metodo debo usar? como logro mi objetivo?? este es mi codigo JavaScript con Fetch
La API es la siguiente: https://covid-api.mmediagroup.fr/v1/cases
const d = document,
$countries = d.getElementById("countries"),
$template = d.getElementById("country-template").content,
$fragment = d.createDocumentFragment();
d.addEventListener("keypress", async e => {
if(e.target.matches("#search")){
if(e.key === "Enter"){
try{
let query = e.target.value,
api = `https://covid-api.mmediagroup.fr/v1/cases?country=${query}`,
res = await fetch(api),
json = await res.json();
console.log(api,res,json);
if(!res.ok) throw {status: res.status, statusText: res.statusText}
if(json.length === 0){
$countries.innerHTML = `<h2>No existen resultados del pais para el criterio de busqueda:
<mark>${query}</mark></h2>`;
}else{
json.forEach(el => {
$template.querySelector("#country-template").textContent = el.confirmed;
let $clone = d.importNode($template, true);
$fragment.appendChild($clone);
});
$countries.innerHTML = "";
$countries.appendChild($fragment);
}
}catch(err){
console.log(err);
let message = err.statusText || "Ocurrio un error";
$countries.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
}
}
}
});
Este es mi index
<!DOCTYPE html>
<html lang="es">
<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">
<title>COVID-19</title>
</head>
<body>
<h1>Buscador de estadisticas de covid-19 por país</h1>
<input type="search" id="search" placeholder="Ingresa el pais a buscar" autocomplete="off">
<section id="countries" class="grid-fluid"></section>
<h3 id="country-template"></h3>
<script src="js/fetch.js"></script>
</body>
</html>
https://covid-api.mmediagroup.fr
devuelve un objeto, no un array, y los objetos no tienen el métodoforEach
. Creo que el error está clarísimo.