AJAX (2)

Demo

AJAX 練習 - 取得數據資料 - Demo

1. Introduction 介紹

這是一個網路上 JavaScript 30 天的課程練習，這個項目將達到以下目標

• 利用 Fetch API 取得數據資料
• 建立正規式
• 認識 promise
• 利用正規式找到內容
• 利用正規式取代內容
• 使用 change 事件和 keyup 事件

功能

利用 Fetch API 取得數據資料

利用 fetch 取得數據資料的時候會先回傳 promise 給我們。Promise 是一個根據附加給他的 Callback 回傳的物件，以取代傳遞 Callback 到這個函數。它回傳的還不是我們要的資料。

查詢一下：

const prom = fetch(endpoint);
console.log(prom);

關於 promise

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Using_promises

第一個回傳的是一個 readableStream

const endpoint ='https://gist.githubusercontent.com
/Miserlou/c5cd8364bf9b2420bb29/raw/
2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/
cities.json';

const cities = [];
fetch(endpoint).then(blob => blob.json()).then(data => console.log(data));

在上面可以看到我們已經抓取到資料，但是要怎麼把它一個一個參數個別放進陣列裡呢？ 這裡運用的是 ES6 的展開運算符...

fetch(endpoint).then(blob => blob.json()).then(data => cities.push(...data));

建立正規式

let regex = new RegExp(wordToMatch, 'gi')

• 第一個參數是正規式的內容
• 第二個參數是一個 flag 旗標
  • global search，會去搜尋整份文件
  • i 表示 case insensitive，也就是不去區分大小寫

利用正規式找到內容

function findMatch(wordToMatch, cities) {
      return cities.filter(place => {

        const regex = new RegExp(wordToMatch, 'gi');
        return place.city.match(regex) || place.state.match(regex)

      });

    }

利用正規式取代內容

replace() 方法會傳回一個新字串，此新字串是透過將原字串與 pattern 比對，但不會改變原本的字串

const regex = new RegExp(this.value, 'gi');

const cityName = place.city.replace(regex,
`<span class='hl'>${this.value}</span>`);

const stateName = place.state.replace(regex,
`<span class='hl'>${this.value}</span>`);

change 事件和 keyup 事件

• keyup 事件 會在任何元素值改變的時候被出發（例如每打一個字都會觸發一次）
• change event 則是會在有元素值改變，且該元素脫離 focus 狀態時才觸發

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);