自學日記

學習程式相關知識及學習法

0%

作品練習-Weather Api

發表於 更新於

作品練習-Weather API

本次練習:使用bootstrap練習開發及申請API及串接資料

申請API

中央氣象局網站登入/註冊

首先至中央氣象局-氣象開放資料平台進行登入/註冊

申請授權碼及取得授權資料

登入之後點選API授權，取得授權碼部分

之後點選上方列表:開發指南-開放資料平臺之資料擷取API，尋找需要的資料:

點選try it out後，在Authorization輸入授權碼:

等資料跑一會之後，即可以取得json，及Request URL

Javascript撰寫

完整JS code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
fetch(
    "https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=CWB-566FD187-2A7C-4845-AC20-59E5816BA0BA&format=JSON&locationName=&elementName="
)
    .then(function (res) {
        return res.json();
    })
    .then(function (data) {
        // console.log(data);
        const weatherData = data.records.location;


        [...weatherData].forEach((currentValue, index) => {
            let name = weatherData[index].locationName;
            let Rain =
                weatherData[index].weatherElement[1].time[2].parameter.parameterName;
            let Wx =
                weatherData[index].weatherElement[0].time[2].parameter.parameterName;
            let MinT =
                weatherData[index].weatherElement[2].time[2].parameter.parameterName;
            let MaxT =
                weatherData[index].weatherElement[4].time[2].parameter.parameterName;
            // console.log(currentValue);

            let img;
            if (Rain == 0) {
                img = "svg/sun.svg";
            } else if (Rain > 25 || Rain < 40) {
                img = "svg/cloud-sun.svg";
            } else if (Rain > 50) {
                img = "svg/cloud.svg";
            } else {
                img = "svg/rain.svg";
            }

            let card = document.querySelector(".row");
            card.innerHTML += `
            <div class="card mb-2 text-center mx-auto" style="width: 18rem">
        <img src="${img}" class="card-img-top mx-auto"  style="width:50% " alt="weather">
            <div class="card-body">
                <h5 class="card-title">${name}</h5>
                <p class="card-text">tmp: ${MinT}&#8451~${MaxT}&#8451</p>
                <p class="card-text">降雨機率: ${Rain}%</p>
                <p class="card-text">tmp: ${Wx}</p>
        </div>
        </div>
    `;
        });
    });

fetch()

使用fetch()進行串接:

1
2
3
4
5
6
7
8
9
fetch(
    "https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=CWB-566FD187-2A7C-4845-AC20-59E5816BA0BA&format=JSON&locationName=&elementName="
)
    .then(function (res) {
        return res.json();
    })
    .then(function (data) {
        // console.log(data);
        const weatherData = data.records.location;

串接後，console.log(data)看看是否有成功串到資料:

ForEach

1
2
3
4
5
6
7
8
9
10
11
[...weatherData].forEach((currentValue, index) => {
            let name = weatherData[index].locationName;
            let Rain =
                weatherData[index].weatherElement[1].time[2].parameter.parameterName;
            let Wx =
                weatherData[index].weatherElement[0].time[2].parameter.parameterName;
            let MinT =
                weatherData[index].weatherElement[2].time[2].parameter.parameterName;
            let MaxT =
                weatherData[index].weatherElement[4].time[2].parameter.parameterName;
            // console.log(currentValue);

console.log(currentValue)查看locationName的陣列顯示如下:

點入陣列查看細節:

If else & HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let img;
           if (Rain == 0) {
               img = "svg/sun.svg";
           } else if (Rain > 25 || Rain < 40) {
               img = "svg/cloud-sun.svg";
           } else if (Rain > 50) {
               img = "svg/cloud.svg";
           } else {
               img = "svg/rain.svg";
           }

           let card = document.querySelector(".row");
           card.innerHTML += `
           <div class="card mb-2 text-center mx-auto" style="width: 18rem">
       <img src="${img}" class="card-img-top mx-auto"  style="width:50% " alt="weather">
           <div class="card-body">
               <h5 class="card-title">${name}</h5>
               <p class="card-text">tmp: ${MinT}&#8451~${MaxT}&#8451</p>
               <p class="card-text">降雨機率: ${Rain}%</p>
               <p class="card-text">tmp: ${Wx}</p>
       </div>
       </div>
   `;

溫度符號輸入

&#8451是HTML中℃的輸入方式，有兩種方式輸入，請參考:

資料來源:HTML中溫度符號的輸入

參考資料:
氣象局 OpenData 抓取「目前天氣」、「天氣預報」