How to assign an image to 17 possible values in an object's key-CodePudding

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 ></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' }

CodePudding user response：

First off, the issue above is that you're assigning values rather than comparing because you're using a single equal sign

if (item.icon = '01d') { ... assigns item.icon to be 01d

if (item.icon == '01d') { ... compares the value of item.icon to 01d

Secondly, instead of using a giant IF block, why not structure your code like this:

const iconCodes = {
  '01d' : '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">',
  '01e' : '<img src="https://openweathermap.org/img/wn/[email protected]" height="42" width="42" style="vertical-align: middle">'
}

Then, just reference this in your loop...

htmlResult  = `Temperature: ${item.day} ºC<br>
  Day: ${date}<br>
  Description: ${item.description}<br>
  ${iconCodes[item.icon]}<br><br>`