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>
1 answers
solution1
1 2020-02-04 20:36:56
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.