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>
json.date
y para statejson.state
, nada mas y así de simple