Day6: Ajax Type Ahead
==
###### tags: `JS30` `axios`

## <font color="#3733FF">different fetch data method</font>
axios是在alpha camp 學習使用的，JS30作者使用fetch的方法，其中比較不熟悉的是`(blob => blob.json())`

axios.get(endpoint)
  .then((response) => {
    cities.push(...response.data)
  })
  .catch((error) => console.log(error))

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

[鐵人賽：ES6 原生 Fetch 遠端資料方法](https://www.casper.tw/javascript/2017/12/28/javascript-fetch/)
了解了一下發現原來是ES6原生的方法，Response 物件中的 body 屬性提供了一個 ReadableStream 的實體，輸入console.log(blob)可以看到以下資訊，ReadableStream 物件中可用以下對應的方法來取得資料
- arrayBuffer()
- blob()
- formData()
- json()
- text()

## <font color="#3733FF">match and display data</font>
使用在alpha camp 2-2 movie list，關鍵字搜尋的方法，在displayMatches時使用作用提供的正則表達式來對關鍵字做highlight

new RegExp(wordToMatch, 'gi') 建立了一個正則表達式物件
'gi' 是 RegExp 的兩個選項，
表示搜尋時不區分大小寫（i）以及搜尋全域範圍（g）。

function findMatches(keyword) {
  let filteredData = []
  filteredData = cities.filter((place) => {
    return place.city.toLowerCase().includes(keyword) || place.state.toLowerCase().includes(keyword)
  })
  return filteredData
}

function displayMatches() {
  const keyword = searchInput.value.trim().toLowerCase()
  const matchArray = findMatches(keyword)
  const htmlContent = matchArray.map(place => {
    const cityName = place.city.replace(new RegExp(keyword, 'gi'),`<span class="highlight">${keyword}</span>`)
    const stateName = place.state.replace(new RegExp(keyword, 'gi'),`<span class="highlight">${keyword}</span>`)
    
    return `
        <li>
          <span class="name">${cityName}, ${stateName}</span>
          <span class="population">${numberWithCommas(place.population)}</span>
        </li>
      `
  }).join('')
  suggestions.innerHTML = htmlContent
}

## <font color="#3733FF">收穫</font>
- 撰寫正規表達式，使用兩個斜線 / / 或是 new RegExp() 來建立一個 RegExp 物件。
- 在對人口單位進行處理時，作者也使用正則表達式

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

\B 代表不是一個詞的邊界，這裡的詞是指連續的 英文、數字、_
(\d{3})+：三個連續的數字，可以出現一次或多次；
(?!\d)：不是一個數字（即這個位置之後不能再有數字）。

## <font color="#3733FF">優化</font>
加入搜尋時出現符合的筆數