學習日誌29-作業練習

第 11 屆 iThome 鐵人賽

DAY 29

自我挑戰組

JavaScript學習日誌系列第 29 篇

11th鐵人賽

古德瑞

2019-10-14 23:41:10

660 瀏覽

分享至

高雄旅遊資訊網練習作業

練習重點 :

抓取JSON資料
下拉選單 change 事件 / 按鈕 click 點擊事件
抓對資料後，組字串印回頁面上

作業範例

建構html，有下拉選單/按鈕，以及空的 div.list (用來組字串印回來用)

<body>
    <header>
        <h1>高雄旅遊資訊網</h1>
        <select name="areas" id="areas">
            <option value="---請選擇地區---" selected>---請選擇地區---</option>
            <option value="苓雅區">苓雅區</option>
            <option value="三民區">三民區</option>
            <option value="新興區">新興區</option>
            <option value="鹽埕區">鹽埕區</option>
        </select>
        <div class="btns-group">
            <p>熱門行政區</p>
            <input type="button" value="苓雅區" class="btn">
            <input type="button" value="三民區" class="btn">
            <input type="button" value="新興區" class="btn">
            <input type="button" value="鹽埕區" class="btn">
        </div>
    </header>
    <main>
        <h3 class="title">---請選擇地區---</h3>
        <div class="list"></div>
    </main>   
</body>

JS部分，宣告 data，把JSON陣列資料放進去，然後各事件處理綁定及監聽，跑 getData 函式

var data = [{高雄旅遊資訊.JSON}];

//事件處理
var areas = document.getElementById('areas'); //選定下拉選單
var list = document.querySelector('.list'); //選定要渲染區塊
var title = document.querySelector('.title'); //選擇要更換的區域標題
var btn = document.querySelectorAll('.btn'); //選定熱門地區按鈕

areas.addEventListener('change', getData, false); //下拉選單監聽事件

熱門地區按鈕總數，並對指定按下的按鈕做監聽點擊觸發事件，跑 getData 函式

for (i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', getData, false)
};

命名 getData 函式，並處理各事項

function getData(e) {
  var select = e.target.value; //指定選擇的值(苓雅區、三民區...等)
  var array = []; //宣告空陣列，等待資料增加進去


  // 抓取對應選擇的資料，放入空陣列裡
  for (i = 0; i < data.length; i++) { //json資料的總數，跑迴圈
    if (data[i].Zone == select) { //判斷json裡資料等同於選擇的值後，處理下面增加陣列資料的行為
      
      array.push({
        Add: data[i].Add,  //加入地址
        Name: data[i].Name, //加入場所名字
        Opentime: data[i].Opentime, //加入開放時間
        Tel: data[i].Tel, //加入場所電話
        Picture1: data[i].Picture1 //加入場所照片url位置
      });
    }
  }

  // 把上面抓好的陣列資料，印回網頁上
  var str = ''; //新增空字串
  for (i = 0; i < array.length; i++) { //計算抓回來資料總數，跑迴圈

    // 對應資料組字串
    str += `<div>
        <span style="background: url(${array[i].Picture1});background-size: cover;">
            <p>${array[i].Name}</p>
        </span>
        <ul>
            <li><i class="icon-time"></i>${array[i].Opentime}</li>
            <li><i class="icon-map1"></i>${array[i].Add}</li>
            <li><i class="icon-phone"></i>${array[i].Tel}</li>
        </ul>
    </div>`;

  }
  list.innerHTML = str; //印回網頁上
  title.textContent = select;; //更改網頁標題
}