# 軟體工程師體驗營 南8組 --- 第 4 週討論區

## 問題
請提交 Codepen 連結

| 組員 | Codepen |
| :----: | :------: |
| +7#8492 | |
| 135144365#3152 | |
| Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/wvYOGPZ) |
| Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/ExdzyXX) |
| SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/LYgvLMM) |
| 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/zYmXjwM) |
| Ligma johnson ㍿#8951 | |
| mangotreeeee#7431 | |
| Xiang#5058 | |

### 第一題 串接臺南市國小各校人數統計
API 資料：[https://data.tainan.gov.tw/dataset/pimary-number-people/resource/3b3e2b37-cbce-49ba-aba6-7f3d5fa8bec9](https://data.tainan.gov.tw/dataset/pimary-number-people/resource/3b3e2b37-cbce-49ba-aba6-7f3d5fa8bec9)

使用 axios 套件做資料串接，並 console.log() 拿到 data 內的資料。

### 第二題 承上題
1. 臺南市總共有幾個國小？
2. 大甲國小有多少學生？


## 討論紀錄
Jacky7035#9423、 SKey#9905提供程式碼
HTML部分

<h1>臺南市國小各校人數統計</h1>

<h2>台南市國小總數量：<span class="schoolTotal"></span></h2>

<h2>各校人數查詢</h2>
<label for="">請選擇學校(可用關鍵字查詢)：<input type="text" list="schoolList" name="school" class="selected"></label>
<datalist id="schoolList" class="schoolList">
</datalist>
<p class="result"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>

CSS部分

.schoolTotal {
  color: blue;
  border: 4px dashed pink;
}

.result {
  color: blue;
  font-weight: bold;
  font-size: 1.5rem;
}

JS部分

let data;

// 取資料
async function getData() {
  try{
    const rawData = await axios.get("https://soa.tainan.gov.tw/Api/Service/Get/b1054400-86a4-40fa-aea0-fb39fce361e2");
    const data = rawData.data.data;     
    data.forEach((item) => (item.school = item.school.trim()));
    return data;
  } catch(e) {
    console.log(e);
  } 
} 

// 渲染國小數量和下拉選單選項
function render(){
  const schoolLength = data.length;
  const schoolTotal = document.querySelector(".schoolTotal");
  const schoolList = document.querySelector(".schoolList");  
  
  schoolTotal.innerText = `${schoolLength}間學校`;
  
  data.forEach((item)=>{
    const newOption = document.createElement("option");
    newOption.value = item.school;
    schoolList.appendChild(newOption);
  });
}

// 選擇學校加上監聽事件
function schoolChange(){
  const selected = document.querySelector(".selected");
  selected.addEventListener("change", (e)=>{    
   data.forEach(item => {
     if(item.school == e.target.value ){
       const result = document.querySelector(".result");
       result.textContent = `${e.target.value}國小人數為：${item.num}人`;   
     }
   });
  });  
}

// 網頁載入時初始化項目
async function init(){
  data = await getData();  
  render();
  schoolChange();  
}

init();

## 討論圖片