1

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>
2
  • Es que tu petición a https://covid-api.mmediagroup.fr devuelve un objeto, no un array, y los objetos no tienen el método forEach. Creo que el error está clarísimo. el 9 oct. 2021 a las 17:29
  • @JaimeMenéndez gracias por contestar, entiendo que el metodo forEach no funciona en este caso, pero entonces que método debo usar?? como lo hago funcionar?? perdón tal vez sea algo demasiado fácil de resolver pero recién estoy estudiando JavaScript y Fetch
    – Juan Gomez
    el 10 oct. 2021 a las 3:30

1 respuesta 1

0

Tu petición a https://covid-api.mmediagroup.fr devuelve un objeto, no un array, y los objetos no tienen el método forEach. Puedes recorrer el objeto como si fuera un array utilizando:

  1. Object.keys(obj) para obtener un array de las claves del objeto que puedes recorrer con un forEach.
  2. Object.values(obj) para obtener un array de los valores de cada clave del objeto que también puedes recorrer con un forEach.
  3. Object.entries(obj) que te devuelve un array de array de cada clave con su valor.

Te adjunto un ejemplo funcional modificando levemente tu código y utilizando Object.keys(obj).

const d = document
let template = d.querySelector('#country-template')

d.addEventListener("keypress", async e => {
  if (e.target.matches("#search")) {
    if (e.key === "Enter") {
      try {
        template.innerHTML = '';
        let query = e.target.value,
          api = `https://covid-api.mmediagroup.fr/v1/cases?country=${query}`,
          res = await fetch(api),
          json = await 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 {
          Object.keys(json).forEach(pais => {
            if(pais === 'All')
             template.innerHTML += `<p>${e.target.value}: ${json[pais].confirmed} casos confirmados</p>`
            
            else
              template.innerHTML += `<p>${pais}: ${json[pais].All.confirmed} casos confirmados</p>`
            
          })

        }

      } catch (err) {
        console.log(err);
        let message = err.statusText || "Ocurrio un error";
        $countries.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<p id="country-template"></p>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.