Trying to shorten the response I am getting from a API call

Question

I am trying to shorten the response for the date field, just to read the date only in a correct format without the time. Does anyone has an idea on how I can do that?

What it is currently outputting: El Cajon (2020-02-04 21:00:00) What my goal is: El Cajon (02-04-2020)

It is tricky because it inside a function.

$(document).ready(function() {
  $('#submitWeather').click(function() {
    var city = $('#city').val();

    if (city != '') {

      $.ajax({

        url: 'https://api.openweathermap.org/data/2.5/forecast?appid=34fd31758b449ea433e05058c225793c&q=' + city + "&units=imperial&count=10",
        type: "GET",
        dataType: "jsonp",
        success: function(data) {
          var widget = show(data);

          $("#show").html(widget);

          $("#city").val('');
        }

      });
    } else {
      $("#error").html('Field cannot be empty');
    }
  });
});

function show(data) {
  return data.city.name + ' (' + data.list[0].dt_txt + ') </h3>' +
    '<p><strong>Temp: </strong>' + data.list[0].main.temp + ' degrees</p>' +
    '<p><strong>Humidity: </strong>' + data.list[0].main.humidity + ' degrees</p>' +
    '<p><strong>Wind Speed: </strong>' + data.list[0].wind.speed + ' MPH</p>';
}

function show1(data) {
  return data.city.name + ' ' + data.list[0].dt_txt + ' </h3>' +
    '<p><strong>Temp: </strong>' + data.list[0].main.temp + ' degrees</p>' +
    '<p><strong>Humidity: </strong>' + data.list[0].main.humidity + ' degrees</p>' +
    '<p><strong>Wind Speed: </strong>' + data.list[0].wind.speed + ' MPH</p>';
}

console.log('hello')

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Weather Dashboard</title>
</head>

<body>

  <!-- Navigation Bar -->

  <nav class="navbar navbar-light bg-light">
    <div class="navbar-brand">Weather Guide</a>
      <!-- <form class="form-inline">
            <input class="inputValue form-control mr-sm-2" type="text" placeholder="Search City" aria-label="Search">
            <button class="button btn btn-outline-success my-2 my-sm-0" value="submit" type="submit">Search</button>
        </form>-->
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class='col-3'>
        <h5 class="text-primary citySearch">Enter City Name</h5>
      </div>
    </div>
    <div class="container-fluid">
      <div class='row'>
        <div class='col-3 row form-group form-inline'>
          <input tyepe='text' name='city' id="city" class="form-control" placeholder="city name">
          <button id="submitWeather" class="btn btn-primary">Search</button>
        </div>
        <div class='col-9 weatherData bg-light'>
          <div id="show"></div>
        </div>
      </div>

    </div>
  </div>





  </div>
  </div>

  <!-- Main Content -->




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

This is essentially a date question. I am going to call this a duplicate of [jQuery date formatting](https://stackoverflow.com/questions/5250244/jquery-date-formatting) because it contains all the information you require. Difference being you need to format `data.list[0].dt_txt` before returning it. — EternalHour, Feb 04 '20 at 21:08

score 1 · Answer 1 · answered Feb 04 '20 at 20:36

For me that looks like date and time so you could convert it to date const date = new Date(data.list[0].dt_txt) and then get then format it however you'd like, or if you want just to get rid of time, data.list[0].dt_txt.split(' ')[0] would take all before the space.

This is everything about Date API: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Trying to shorten the response I am getting from a API call

1 Answers1