天気APIの情報を利用し、データから得られた気温の情報を読み取って、気温によって文章や表示する情報を変更するようにしたい

現在位置を求めて、その時点での気温の情報をAPIから受け取り、switch構文で気温によって文章が変わる処理をしたいと考えています。気温の情報を持つMath.round(forecast.main.temp)を取り入れることができればそれを実現できると考えたのですが、データの指定先かJavaScriptの書き方または書く位置が間違っているせいか、APIから得られた気温の情報を読み取って私がしたい処理をすることができませんでした。

switch構文で気温に当たるデータを変数に置き換えて処理を実現しようと試みましたが、変数の左側が無効だったり、そもそもデータの中身がないといわれたり、とにかくエラーが出てそこから抜け出せない状況に陥っています。
原因は変数の指定先にあると思うのですが、まだエラーをつぶし切れていません。このエラーを乗り越え、理想とする処理を実現するにはどうすればいいのでしょうか？回答よろしくお願いいたします。

【追記】
while構文の配置位置はいろいろ試したのですが処理が止まったり、エラーメッセージが出たりととにかく上手く行かなかったので一旦一番後ろに配置しました。。

Javascript
1'use strict';
2
3navigator.geolocation.getCurrentPosition(success, fail);
4
5function success(pos) {
6    ajaxRequest(pos.coords.latitude, pos.coords.longitude);
7}
8
9function fail(error) {
10    alert('位置情報の取得に失敗しました。エラーコード：' + error.code);
11}
12
13function utcToJSTime(utcTime) {
14    return utcTime * 1000;
15}
16
17function ajaxRequest(lat, long) {
18    const url = 'https://api.openweathermap.org/data/2.5/forecast';
19    const appId = 'API Key';
20
21    $.ajax({
22        url: url,
23        data: {
24            appid: appId,
25            lat: lat,
26            lon: long,
27            units: 'metric',
28            lang: 'ja'
29        }
30    })
31    .done(function(data) {
32        $('#place').text(data.city.name + ', ' + data.city.country);
33
34        data.list.forEach(function(forecast, index) {
35            const dateTime = new Date(utcToJSTime(forecast.dt));
36            const month = dateTime.getMonth() + 1;
37            const date = dateTime.getDate();
38            const hours = dateTime.getHours();
39            const min = String(dateTime.getMinutes()).padStart(2, '0');
40            const temperature = Math.round(forecast.main.temp);
41            const description = forecast.weather[0].description;
42            const iconPath = `images/${forecast.weather[0].icon}.svg`;
43
44            if(index === 0) {
45                const currentWeather = `
46                <div class="icon"><img src="${iconPath}"></div>
47                <div class="info">
48                    <p>
49                        <span class="description">現在の天気：${description}</span>
50                        <span class="temp">${temperature}</span>°C
51                    </p>
52                </div>`;
53                $('#weather').html(currentWeather);
54            }
55        });
56    })
57    .fail(function() {
58        console.log('$.ajax failed!');
59    })
60}
61
62switch(forecast.main.temp) {
63  case (35<9999):
64    
65    console.log('aaaaaaaaaaaaaaa');
66    clothes.innerHTML = "aaaaaaaaaaaaaaa";
67    break;
68
69  case (26 >= 35):
70  console.log('aaaaaaaaaaaaaaaaaaaaaaa');
71  break;
72
73  case (21 >= 25):
74  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
75  break;
76
77  case (15 >= 20):
78  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
79  break;
80
81  default: 
82    console.log('aaaaaaaaaaaaaaaaaaaaaaaaa');
83} 
84}
85

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>7-02_api</title>
7<link rel="shortcut icon" href="../../_common/images/favicon.ico">
8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
9<link href="../../_common/css/style.css" rel="stylesheet">
10<link href="css/special.css" rel="stylesheet">
11</head>
12<body>
13<header>
14<div class="container">
15<h1>あああああああ</h1>
16<h2>ああああああああああああああああ</h2>
17</div><!-- /.container -->
18</header>
19<main>
20<div class="container">
21<section>
22    <h3 id="place"></h3>
23    <div  id="now">
24        <div id="weather">
25        </div>
26    </div>
27    <table id="forecast">
28    </table>
29</section>
30</div><!-- /.container -->
31</main>
32<footer>
33<div class="container">
34<p>JavaScript Samples</p>
35</div><!-- /.container -->
36</footer>
37<script src="../../_common/scripts/jquery-3.4.1.min.js"></script>
38<script src="script.js"></script>
39</body>
40</html>

退会済みユーザー

2021/11/30 06:43

うまくいかないということは、$.ajaxが失敗したときの .fail(function() { console.log('$.ajax failed!'); }) によって、console に $.ajax failed! と表示されている、ということでしょうか？

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問