0

Empecé por hacer una estadística con un archivo json y me dió el siguiente error:

Error"covid.js:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state')

>at HTMLButtonElement.clickBoton (covid.js:17:44)"

El archivo tiene la siguiente estructura:

{
    "date":20200501,
    "state":"CA",
    "positive":50442,
    "probableCases":null,
    ...
}

Llevo días tratando de acceder a los demás elementos, pero me dice que no los puede leer.

Los dos elementos que quiero mostrar son date y state para poder filtrarlos con esos criterios.

Use también una variable global en la consola devtools y no me muestra los demás elementos algo así:

temp1.date después me muestra la fecha abajo y la escribo entre corchetes y después me dice undefined. Después ya no puedo agregar otro elemento como "state"

Les voy agradecer profundamente el que me ayuden a entender la logica de la carga de los elementos de un json.

Atte

Felix Del Rio

window.onload = iniciar;

function iniciar() {
let boton = document.getElementById("btnCargar");
boton.addEventListener("click", clickBoton);
}

async function cargarUrl(url) {
    let response = await fetch(url);
    return response.json();
}

async function clickBoton() {
    let json = await cargarUrl('https://api.covidtracking.com/v1/states/ca/20200501.json')
    console.log(json);

    let estadisticas = json.date[20200501].state["CA"];
    console.log(estadisticas);


}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estadisticas Covid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div>
        <h1>Estadisticas del Covid-19</h1>

        <b>Fecha</b> <input  id="InpFecha" type="date" /><br/>
        <b>País</b>  
        <select id="SelSte">
            <option value="ca">California</option>
            <option value="tx">Texas</option>
        </select> <br />
        <button id="btnCargar">Cargar Estadisticas</button>
    </div>

    <script src="covid.js"></script>
    
</body>
</html>

2
  • 1
    Te retorna un objeto con propiedades. Para acceder a la propiedad date haces json.date y para state json.state, nada mas y así de simple
    – Yussef
    Commented el 2 nov. 2023 a las 21:14
  • Buenasce tardes: Yessef agradezco tu apoyo realice el siguente cambio en codigo, por lo sugerido asi: let estadisticas = json.date[20200501].json.state["CA"]; y medio este error "covid.js:17 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'json') at HTMLButtonElement.clickBoton (covid.js:17:44)" Commented el 3 nov. 2023 a las 0:47

1 respuesta 1

0

Tu código funciona hasta esta parte

async function clickBoton() {
    let json = await cargarUrl('https://api.covidtracking.com/v1/states/ca/20200501.json')
    console.log(json);

    let estadisticas = json.date[20200501].state["CA"]; //esto está mal
    console.log(estadisticas);
}

Tu tienes un JSON que te retorna un objeto con varias propiedades en su interior, para acceder a dichas propiedades usas el operador punto . es decir objeto.propiedad

Por lo que para acceder a las propiedades date y state debes hacer lo siguiente:

async function clickBoton() {
   //cambie el nombre de json a respuesta, porque en este punto tienes un objeto NO un json 
   let respuesta = await cargarUrl('https://api.covidtracking.com/v1/states/ca/20200501.json')
 

    let estado = respuesta.state;
    let date = respuesta.date;
    console.log(estado,date);
}
2
  • Realice lo sugerido @Yussef, con éxito, continuo con la otra parte de mi proyecto, estaré pendiente para contestar con tu respuesta a otros nuevos compañeros que tengan el mismo error, excelente dia!! Commented el 3 nov. 2023 a las 1:36
  • @FelixDelRioSandoval Que bueno haber podido ayudarte, recuerda marcar la respuesta como aceptada si así te parece. Saludos y suerte en tu proyecto
    – Yussef
    Commented el 3 nov. 2023 a las 1:38

Tu Respuesta

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

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