今天要來介紹串接政府資料啦~~
首先這裡提供一個版型(有RWD)

CodePen: https://codepen.io/wemyferb/pen/eYzYGBb

API: https://raw.githubusercontent.com/hexschool/KCGTravel/master/datastore_search.json
資料來源: 高雄市政府

首先我們的主要目標是有下拉選單
選擇想要的區域後
畫面會顯示該區域的景點
並且標題也會自動更新成該區域名字

所以我們首先要把所有區域名字(不重複)塞到select裡面
先綁定DOM (起手勢啦~~)

//DOM
let list = document.querySelector('.list');
let selectMenu = document.querySelector('.selectMenu');
let title = document.querySelector('.title');

監聽(change事件 )

//監聽
selectMenu.addEventListener('change',updateListSel,false);

不過這時候我們還沒有資料
AJAX 這時候就派上用場了

var xhr = new XMLHttpRequest();
// true : 非同步 不會等資料傳回來 就會讓程式繼續往下跑 等到回傳資料才會自動回傳
//false : 同步 會等資料傳回來 才讓程式繼續往下跑
xhr.open('get','https://raw.githubusercontent.com/hexschool/KCGTravel/master/datastore_search.json',true)
xhr.send();
xhr.onload = function(){
    data = JSON.parse(xhr.responseText).result.records;
    selectOption();
    updateList(data);
}

注意:
這裡我們撈的時候就順便執行selectOption();
這樣撈完下拉選單就出現了

function selectOption(){
    let zoneName = new Set();
    //沒有重複 就執行前面
    let zoneList = data.filter(item => !zoneName.has(item.Zone) ? zoneName.add(item.Zone):false);
    for(let i = 0; i < zoneList.length; i++){
        let addOption = document.createElement('option');
        addOption.textContent = zoneList[i].Zone;
        addOption.setAttribute = ('value', zoneList[i].Zone)
        selectMenu.appendChild(addOption);
    }
}

這裡使用了 JS ES6 set 來過濾重複資料
可參考此篇文章
https://guahsu.io/2017/06/JavaScript-Duplicates-Array/?fbclid=IwAR3xTJuNXTEwWoIxf0wefyWYQAODlqL_IjU5U6c1MVqGu_i4k6C2_Zpm-d0

而filter可參考此篇文章
https://wcc723.github.io/javascript/2017/06/29/es6-native-array/

接著我們採用 createElement
別忘記!! 還要用 append塞到你想插入的位置
這樣下拉選單就出現啦~~

CodePen: https://codepen.io/wemyferb/pen/OJXJxBQ
那今天就介紹到這裡啦
明天將介紹 change 事件
有任何問題 或 內容有誤 都可以回覆我唷!!