This is my first time with javascript, I know Its awful hahaha
I'm looking for a way to display only the currentDateTime value from the json, the number after the T to be more specific, when clicking the button, but everytime I click on the button, It displays all the json data. Is there a better way to do this, I mean, a correct way?
<!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>The other answers are not wrong but don't provide an explanation on what's wrong.
Your problem is that you stringify the whole object you get from the server, not just the 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))