今天來嘗試一下關於新聞的 API，選的是 News API。

說起來，為了要湊 30 個 API，我現在每天都在逛 ProgrammableWeb。
我列了超過 10 個不同的主題類別，從鐵人賽前，就把 ProgrammableWeb 上的 API Categories 點開，一個個點開，看每個類別裡有哪些 API 特別有人在關注。而在新聞類別裡面，除了幾大歐美傳統新聞像是衛報（Guardian)、BBC、紐約時報（NY Times) ，更多的是網路新聞如 Reddit 、Hacker News 。

News API 不同於上述的新聞媒體自己生產內容，而是以超過 5000 個新聞媒體跟部落格作為來源做成索引，當然也包括上述所有知名新聞媒體。

感覺很棒吧。

來看看 News API 的文件：

News API 的文件寫得非常簡潔易懂，他本身就是一個挺簡單的 API 。更好的是，在你註冊得到 API Key 之後，文件裡面全部的 code 都會自動補上你的 API Key，如此一來文件裡的範例都成了可以直接利用、剪下貼上的程式碼。

News API 有三個 endpoint

• /v2/top-headlines 頭條：由一或多個來源產生的的頭條快報
• /v2/everything 索引：可以搜索所有的超過 5000 筆來源產生的文章
• /v2/sources 來源：從特定的來源獲取資訊

今天的作品裡面，我要用這個 API 在我做的網頁上 PO 出關於 Ｗeb API 最新的 20 條新聞。
在文件的 Get Started 頁面，就有範例使用關鍵字來列出相關文章。

直接跳到實作部分吧

由於是想要特地關鍵字，如果用頭條 endpoint 去找，大概找不到幾條，所以應該要用 /v2/everything
而 everything endpoint 一定要加上的參數是

• q={ 關鍵字 }

可自己選擇要加的參數則是

• sources 來源
• from = { 年-月-日 } , to = { 年-月-日 }
• sortBy 排序：選項有 relevancy、 popularity、 publishedAt.

（還有很多其他參數，詳細請見文件）

var url = 'https://newsapi.org/v2/everything?' +
          'q=Web+API' +
          'apiKey=bdbf694617cf4656ba54e8f095033e16';

function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
   var response = JSON.parse(this.responseText); 
   console.log(response);
  };
  xhr.open("GET",url,true);
  xhr.send();
}
makeRequest();

傳回來的 response:

我發現，傳回來的 Response 裏居然有一萬七千多條新聞，便再加上from={時間}&to={時間} 跟 sortBy 參數，花了一些時間調整時間格式：

var currentDate = new Date();
var year = currentDate.getFullYear();
var month = currentDate.getMonth()+1;
var date = currentDate.getDate();

var toNow = year + '-' + month + '-'+ date;
var daysAgo = 3;
var fromDaysAgo = year + '-' + month + '-'+ (date-daysAgo) ;

var url = 'https://newsapi.org/v2/everything?' +
          'q=Web+API' +
          '&sortBy=popularity'+
          '&from='+ fromDaysAgo +
          '&to='+ toNow +
          '&apiKey=bdbf694617cf4656ba54e8f095033e16';

然後在 .onload 裡面把標題、敘述、時間、作者、縮圖、URL 都 loop 出來：

  xhr.onload = function() {
   var response = JSON.parse(this.responseText); 
    for(let i=0; i<20; i++){
      var news = response.articles[i];
      var div = document.createElement('div');
      var a = document.createElement('a');
      var title = document.createElement('h2');
      var desc = document.createElement('p');
      var metadata = document.createElement('p');
      var img = document.createElement('img');
      
      container.appendChild(div);
      div.appendChild(img);
      div.appendChild(a);
      a.appendChild(title);
      div.appendChild(desc);
      div.appendChild(metadata);
      
      img.setAttribute('src',news.urlToImage);
      img.height = 200;
      a.setAttribute('href',news.url)
     
      title.innerHTML = news.title;
      desc.innerHTML = news.description;
      metadata.innerHTML = 'source: '+ news.source.name + " | " +'publish at: ' + news.publishedAt;
      
    }
  }

得到以下畫面：

完成。 Codepen Demo