'How to assign an image to 17 possible values in an object's key
I need some help. I have to assign an image (stored in constants iconOne, iconTwo...) to each of the 17 possible values for the icon key value of const urlJson. The 17 options are in the Ifs of the code below, as well as the const. How can I do this? I couldn't use if...
<!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://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="city"></h1>
</div>
<script>
const iconOne = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconTwo = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconThree = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconFour = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconFive = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconSix = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconSeven = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconEight = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconNine = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconTen = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconEleven = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
const iconTwelve = ('<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">')
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) {
const urlJson = data.daily.map(({ dt, temp: { day }, weather: [{ description, icon }] }) => ({ dt, day, description, icon }))
var htmlResult = '';
urlJson.forEach(item => {
// THESE IFs JUST RETURN iconOne
if (item.icon = '01d') {
item.icon = iconOne
} else if (item.icon = '01n') {
item.icon = iconTwo
} else if (item.icon = '02d') {
item.icon = iconThree
} else if (item.icon = '02n') {
item.icon = iconFour
} else if (item.icon = '03d') {
item.icon = iconFive
} else if (item.icon = '03n') {
item.icon = iconFive
} else if (item.icon = '04d') {
item.icon = iconSix
} else if (item.icon = '04n') {
item.icon = iconSix
} else if (item.icon = '09d') {
item.icon = iconSeven
} else if (item.icon = '09n') {
item.icon = iconSeven
} else if (item.icon = '10d') {
item.icon = iconEight
} else if (item.icon = '10n') {
item.icon = iconNine
} else if (item.icon = '11d') {
item.icon = iconTen
} else if (item.icon = '11n') {
item.icon = iconTen
} else if (item.icon = '13d') {
item.icon = iconEleven
} else if (item.icon = '13n') {
item.icon = iconEleven
} else if (item.icon = '50d') {
item.icon = iconTwelve
} else if (item.icon = '50n') {
item.icon = iconTwelve
}
var date = new Date(item.dt)
htmlResult += `Temperature: ${item.day} ºC<br>
Day: ${date}<br>
Description: ${item.description}<br>
${item.icon}<br><br>`
});
$(".city").html(htmlResult);
});
</script>
</body>
</html>
This is the object stored in the urlJson const and here is the icon key that I want to assign the image to in one of the constants:
{ 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' }
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|