I have a variable with four keys. When the icon key has the value 01d, I need to display the icon referring to this value, which is in the img folder. How can I make this conditional?
I have the following variable destructuring and below I put its return.
let [dt1, dt2, dt3, dt4, dt5, dt6, dt7, dt8] = urlJson returns:
{ dt: 1643803200, day: 12.84, description: 'clear sky', icon: '01d' }
{ dt: 1643889600, day: 14.56, description: 'overcast clouds', icon: '04d' }
{ dt: 1643976000, day: 14.85, description: 'overcast clouds', icon: '04d' }
{ dt: 1644062400, day: 14.41, description: 'broken clouds', icon: '04d' }
{ dt: 1644148800, day: 14.99, description: 'clear sky', icon: '01d' }
{ dt: 1644235200, day: 15.68, description: 'few clouds', icon: '02d' }
{ dt: 1644321600, day: 14.95, description: 'broken clouds', icon: '04d' }
{ dt: 1644408000, day: 16.37, description: 'overcast clouds', icon: '04d' }
Here is the code:
<!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">
<link id="mystylesheet" type="text/css" rel="stylesheet" href="style.css">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="city"></h1>
<h2><span id="tags">0</span>ºC</h2>
</div>
<script>
const urlJsonString = $.getJSON('https://api.openweathermap.org/data/2.5/onecall?lat=38.7267&lon=-9.1403&exclude=current,hourly,minutely,alerts&units=metric&appid={APPID}', function (data) {
let urlJson = data.daily.map(({ dt, temp: { day }, weather: [{ description, icon }] }) => ({ dt, day, description, icon }))
let [dt1, dt2, dt3, dt4, dt5, dt6, dt7, dt8] = urlJson
var date = dt1.dt
let result = `Temperature: ${dt1.day} ºC<br>
Dia: ${date}<br>
${dt1.icon}`
$(".city").html(result);
});
</script>
</body>
</html>
See if this works to you. I have no key access to this API, so i've made with your fictional data.
Please be sure that your 'icon' is your image URL
https://jsfiddle.net/ep9hsxLf/
let urlJson = [
{ dt: 1643803200, day: 12.84, description: 'clear sky', icon: '01d' },
{ dt: 1643889600, day: 14.56, description: 'overcast clouds', icon: '04d' },
{ dt: 1643976000, day: 14.85, description: 'overcast clouds', icon: '04d' },
{ dt: 1644062400, day: 14.41, description: 'broken clouds', icon: '04d' },
{ dt: 1644148800, day: 14.99, description: 'clear sky', icon: '01d' },
{ dt: 1644235200, day: 15.68, description: 'few clouds', icon: '02d' },
{ dt: 1644321600, day: 14.95, description: 'broken clouds', icon: '04d' },
{ dt: 1644408000, day: 16.37, description: 'overcast clouds', icon: '04d' }
]
var htmlResult = '';
urlJson.forEach(item => {
var date = new Date(item.dt)
htmlResult += `Temperature: ${item.day} ºC<br>
Dia: ${date}<br>
${item.icon}<br><br>`
});
$(".city").html(htmlResult);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="city"></div>