I located a URL I could use as substitute for your ${API} and came up with the following adaptation of your script.
The logic does NOT use your variable values assigned to each city ... because these were not required for this version of the script (obviously URL dependent).
I also coded a few extra lines to get additional info from that site.
Finally, I added a loop to build a simplistic HTML page for local viewing the compiled extracts.
#!/bin/sh
#QUESTION: https://stackoverflow.com/questions/74472892/how-to-use-the-variable-name-as-file-name-instead-of-value
CITY_LIST="Ottawa Montreal Toronto Quebec Halifax Calgary Victoria"
CITY_LIST="Tromso Gjovik Oslo Trondheim Bergen"
### Generic Weather Site
#https://www.meteoprog.com/weather/Tromso/
API="https://www.meteoprog.com/weather/"
#Creates a directory
#mkdir scraped-weather
#Loops through the cities
for CITY in $(echo ${CITY_LIST})
do
echo "\n Pulling report for ${CITY} ..."
rm -f "${CITY}.txt"
### Place city name at start of file
#echo "${CITY}" > "${CITY}.txt"
### I get the data for each city and puts it in the city file
#curl -s "${API}${CITY}/" | grep -A5 -E '[0-9]{2}-[0-9]{2}-[0-9]{2}' >> ${CITY}.txt
curl -s "${API}${CITY}/" > "${CITY}_RAW.txt"
### Extract directly relevant segments
tail -n +2 "${CITY}_RAW.txt" |
grep -A5 -E '[0-9]{2}-[0-9]{2}-[0-9]{2}' >> "${CITY}.txt"
tail -n +2 "${CITY}_RAW.txt" |
grep -A3 'class="feels-like"' >> "${CITY}.txt"
tail -n +2 "${CITY}_RAW.txt" |
grep -A27 'class="today__atmosphere"' >> "${CITY}.txt"
#rm -f "${CITY}_RAW.txt"
done
### Build-up HTML page for viewing locally
{
echo "<HTML><BODY>"
for CITY in $(echo ${CITY_LIST})
do
cat "${CITY}.txt"
done
echo "</BODY></HTML>"
} >WEATHER_REPORT.html
The HTML page is as follows:
<HTML><BODY>
<h2>Currently in Tromso <time datetime="2022-11-27T22:25:20+01:00"><span class="city-local-time">22:25</span> - 27 November, Sunday</time></h2>
<div class="current-temperature">
<div class="today-temperature">
<span dir="ltr">-3°</span>
<div class="icons icons81x73 night moon-cloud_2" title="cloudy, clear at times, no precipitation"></div>
</div>
<span class="feels-like">
Feels Like <b>-5°C</b> <div class="cool">Cool</div>
</span>
<table class="today__atmosphere">
<tbody>
<tr>
<th>Chance of precipitation</th>
<td class="atmosphere-spec"><span class="icon-rain-drops"></span><b>0</b> %</td>
</tr>
<tr>
<th>Wind</th>
<td class="atmosphere-spec"><span class="icon-wind"></span><b>3</b> mps</td>
</tr>
<tr>
<th>Pressure</th>
<td class="atmosphere-spec"><span class="icon-meater"></span><b>753</b> </td>
</tr>
<tr>
<th>UV Index</th>
<td class="atmosphere-spec"><span class="icon-uv"></span><b>0/12</b></td>
</tr>
<tr>
<th>Humidity</th>
<td class="atmosphere-spec"><span class="icon-dropp"></span><b>83</b> %</td>
</tr>
<tr>
<th>Precipitation</th>
<td class="atmosphere-spec"><span class="icon-rainfall"></span><b>0</b> mm</td>
</tr>
</tbody>
</table>
<h2>Currently in Gjovik <time datetime="2022-11-27T22:28:08+01:00"><span class="city-local-time">22:28</span> - 27 November, Sunday</time></h2>
<div class="current-temperature">
<div class="today-temperature">
<span dir="ltr">+2°</span>
<div class="icons icons81x73 night cloud_2-rain" title="overcast, light rain"></div>
</div>
<span class="feels-like">
Feels Like <b>+2°C</b> <div class="cool">Cool</div>
</span>
<table class="today__atmosphere">
<tbody>
<tr>
<th>Chance of precipitation</th>
<td class="atmosphere-spec"><span class="icon-rain-drops"></span><b>60</b> %</td>
</tr>
<tr>
<th>Wind</th>
<td class="atmosphere-spec"><span class="icon-wind"></span><b>2</b> mps</td>
</tr>
<tr>
<th>Pressure</th>
<td class="atmosphere-spec"><span class="icon-meater"></span><b>751</b> </td>
</tr>
<tr>
<th>UV Index</th>
<td class="atmosphere-spec"><span class="icon-uv"></span><b>0/12</b></td>
</tr>
<tr>
<th>Humidity</th>
<td class="atmosphere-spec"><span class="icon-dropp"></span><b>98</b> %</td>
</tr>
<tr>
<th>Precipitation</th>
<td class="atmosphere-spec"><span class="icon-rainfall"></span><b>0.4</b> mm</td>
</tr>
</tbody>
</table>
<h2>Currently in Oslo <time datetime="2022-11-27T22:28:10+01:00"><span class="city-local-time">22:28</span> - 27 November, Sunday</time></h2>
<div class="current-temperature">
<div class="today-temperature">
<span dir="ltr">+4°</span>
<div class="icons icons81x73 night cloud_2" title="overcast, no significant precipitation"></div>
</div>
<span class="feels-like">
Feels Like <b>+4°C</b> <div class="cool">Cool</div>
</span>
<table class="today__atmosphere">
<tbody>
<tr>
<th>Chance of precipitation</th>
<td class="atmosphere-spec"><span class="icon-rain-drops"></span><b>40</b> %</td>
</tr>
<tr>
<th>Wind</th>
<td class="atmosphere-spec"><span class="icon-wind"></span><b>2</b> mps</td>
</tr>
<tr>
<th>Pressure</th>
<td class="atmosphere-spec"><span class="icon-meater"></span><b>757</b> </td>
</tr>
<tr>
<th>UV Index</th>
<td class="atmosphere-spec"><span class="icon-uv"></span><b>0/12</b></td>
</tr>
<tr>
<th>Humidity</th>
<td class="atmosphere-spec"><span class="icon-dropp"></span><b>96</b> %</td>
</tr>
<tr>
<th>Precipitation</th>
<td class="atmosphere-spec"><span class="icon-rainfall"></span><b>0.07</b> mm</td>
</tr>
</tbody>
</table>
<h2>Currently in Trondheim <time datetime="2022-11-27T22:28:11+01:00"><span class="city-local-time">22:28</span> - 27 November, Sunday</time></h2>
<div class="current-temperature">
<div class="today-temperature">
<span dir="ltr">+4°</span>
<div class="icons icons81x73 night cloud_2-rain" title="overcast, light rain"></div>
</div>
<span class="feels-like">
Feels Like <b>+3°C</b> <div class="cool">Cool</div>
</span>
<table class="today__atmosphere">
<tbody>
<tr>
<th>Chance of precipitation</th>
<td class="atmosphere-spec"><span class="icon-rain-drops"></span><b>30</b> %</td>
</tr>
<tr>
<th>Wind</th>
<td class="atmosphere-spec"><span class="icon-wind"></span><b>3</b> mps</td>
</tr>
<tr>
<th>Pressure</th>
<td class="atmosphere-spec"><span class="icon-meater"></span><b>756</b> </td>
</tr>
<tr>
<th>UV Index</th>
<td class="atmosphere-spec"><span class="icon-uv"></span><b>0/12</b></td>
</tr>
<tr>
<th>Humidity</th>
<td class="atmosphere-spec"><span class="icon-dropp"></span><b>80</b> %</td>
</tr>
<tr>
<th>Precipitation</th>
<td class="atmosphere-spec"><span class="icon-rainfall"></span><b>0.19</b> mm</td>
</tr>
</tbody>
</table>
<h2>Currently in Bergen <time datetime="2022-11-27T22:28:12+01:00"><span class="city-local-time">22:28</span> - 27 November, Sunday</time></h2>
<div class="current-temperature">
<div class="today-temperature">
<span dir="ltr">+5°</span>
<div class="icons icons81x73 night cloud_2" title="overcast, no significant precipitation"></div>
</div>
<span class="feels-like">
Feels Like <b>+3°C</b> <div class="cool">Cool</div>
</span>
<table class="today__atmosphere">
<tbody>
<tr>
<th>Chance of precipitation</th>
<td class="atmosphere-spec"><span class="icon-rain-drops"></span><b>90</b> %</td>
</tr>
<tr>
<th>Wind</th>
<td class="atmosphere-spec"><span class="icon-wind"></span><b>5</b> mps</td>
</tr>
<tr>
<th>Pressure</th>
<td class="atmosphere-spec"><span class="icon-meater"></span><b>752</b> </td>
</tr>
<tr>
<th>UV Index</th>
<td class="atmosphere-spec"><span class="icon-uv"></span><b>0/12</b></td>
</tr>
<tr>
<th>Humidity</th>
<td class="atmosphere-spec"><span class="icon-dropp"></span><b>91</b> %</td>
</tr>
<tr>
<th>Precipitation</th>
<td class="atmosphere-spec"><span class="icon-rainfall"></span><b>0.09</b> mm</td>
</tr>
</tbody>
</table>
</BODY></HTML>