Esta es mi primera vez con javascript, sé que es horrible jajaja
Estoy buscando una manera de mostrar solo el valor de fecha y hora actual del json, el número después de la T para ser más específico, al hacer clic en el botón, pero cada vez que hago clic en el botón, muestra todos los datos de json. ¿Hay una mejor manera de hacer esto, quiero decir, una forma correcta?
<!DOCTYPE html> <html lang="en"> <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>World Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="msg">World Clock</h1> <p class="dsc">Click one of the buttons to see the current time</p> <button class="btn1" onclick="estFunc()">Eastern Standard Time (EST)</button> fetch('http://worldclockapi.com/api/json/est/now') .then(response => response.json()) .then(data => time = data) .then(() => console.log(time["currentDateTime"])) function estFunc() { const obj = {time}; const estJson = JSON.stringify(obj); document.getElementById("est").innerHTML = estJson; } const estFunc = async () => { const response = await fetch('http://worldclockapi.com/api/json/est/now', { method: 'GET', headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); //extract JSON from the http response // do something with JSON document.getElementById("est").innerHTML = data.currentDateTime; } <html lang="en"> <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>World Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="msg">World Clock</h1> <p class="dsc">Click one of the buttons to see the current time</p> <button class="btn1" onclick="estFunc()">Eastern Standard Time (EST)</button> <div id="est"></div> </body> </html>Las otras respuestas no son incorrectas, pero no brindan una explicación sobre lo que está mal. Su problema es que stringify todo el objeto que obtiene del servidor, no solo el currentDateTime .
fetch('http://worldclockapi.com/api/json/est/now') .then(response => response.json()) .then(data => time = data.currentDateTime.time) // only assign currentDateTime.time instead of everything .then(() => console.log(time.currentDateTime.time))