How to get only an specific piece of json data-CodePudding

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 >World Clock</h1>
    <p >Click one of the buttons to see the current time</p>

    <button  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;
}

CodePudding user response：

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 >World Clock</h1>
  <p >Click one of the buttons to see the current time</p>
  <button  onclick="estFunc()">Eastern Standard Time (EST)</button>
  <div id="est"></div>
</body>

</html>

CodePudding user response：

You mean reformat the current time and display it? You can refer to my code below.Good luck! Goto answers

var stringDate = ("2022-01-17T01:49-05:00").replace(/-/g,"-").replace(/[TZ]/g," ");
var date = new Date(stringDate);
console.log(date.toLocaleTimeString('en-US'));

CodePudding user response：

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"]) // only assign currentDateTime instead of everything
    .then(() => console.log(time["currentDateTime"]))