iT邦幫忙

0

[鼠年全馬] W17 - JavaScript學習心得 - 阿賈克斯為你打造溝通橋樑p3

嗨我又來騙文章數了~/images/emoticon/emoticon01.gif

這週要來實作抓政府Open API並實際呈現於畫面上
https://ithelp.ithome.com.tw/upload/images/20200528/201186865VVr3248wH.jpg

API的部分是用六角上課時提供的API連結: 高雄旅遊網
不得不說六角老師的這個範例非常好用
該有的都有
景點照片阿 景點介紹阿 經緯度阿 都包在裡面了
非常適合拿來練習/images/emoticon/emoticon01.gif


#API怎麼用?

工欲善其事 必先利其器

https://ithelp.ithome.com.tw/upload/images/20200528/20118686gvKLgwByMB.png
-- 截自 高雄市政府資料開放

既然我們要抓高雄市政府Open API, 就必須先知道怎麼使用
首先來到平台的首頁, 我們要抓的就是頁面中的 資料集 的部分

https://ithelp.ithome.com.tw/upload/images/20200528/20118686fmVDxgL89u.jpg
點進去可以發現各種分類各種格式
其中我們要使用的是CSV
並利用平台提供的方法轉JSON


##CKAN API查詢

CKAN查詢是 高雄市政府資料開放平台提供的查詢方式
它可以將CSV轉成JSON
讓前端在抓回資料後不用在另外編譯
直接JSON.parse就能用了

##使用方式

先來看看平台提供的 使用說明
https://ithelp.ithome.com.tw/upload/images/20200528/20118686mKqcOT5cof.jpg
可以看到基本上是以url query方式來查詢
基本的url: *https://data.kcg.gov.tw/api/action/datastore_search?resource_id=&limit=&q=&sql=*
query參數除了resource_id外其他都可選:

  • resource_id(必要): 此參數代表資料來源的對應唯一值
  • limit: 要抓的資料筆數
  • q: 資料內容包含的字串
  • sql: 用SQL語法方式查詢

其中最重要的當然是resource_id
那要怎麼找到它呢?

##resource_id在哪裡?

首先先到資料主頁面找到「預覽」-> 「更多資訊」
https://ithelp.ithome.com.tw/upload/images/20200528/20118686jR4jJXcgoF.jpg
點進入後找到「資料API」
https://ithelp.ithome.com.tw/upload/images/20200528/201186865h8N3JmDBx.jpg
這邊要注意, 並不是每個資料都有提供這種查詢方式
沒有「資料API」這個按鈕代表它沒有提供
就只好用其他方式來取得資料囉!!
https://ithelp.ithome.com.tw/upload/images/20200528/201186869pvIgRKHOQ.jpg
點進後可以看到它已經幫你寫好了範例了
而範例中的resource_id就是這個API的resource_id囉!!


開始實作

會用API之後當然就是直接來用ajax抓看看囉~
基本程式碼都先準備起來~

var url = 'https://data.kcg.gov.tw/api/action/datastore_search?resource_id=92290ee5-6e61-456f-80c0-249eae2fcc97';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.addEventListener('load', function () {
    console.log(xhr.responseText);
});
xhr.send();

url放上API的url網址跑看看吧~
https://ithelp.ithome.com.tw/upload/images/20200528/20118686YkFDzrajrn.jpg
嗯~確實有抓到~hen棒棒~/images/emoticon/emoticon25.gif
但是這樣不好看, 我們轉JSON格式一下

JSON.parse(xhr.responseText);

https://ithelp.ithome.com.tw/upload/images/20200528/20118686iFLb7YysfO.jpg
好看多了~

可以看到資料結構中, 包含:

  • success: 是否成功取得
  • field: 資料表頭
  • record: 資料內容

還有其他拉哩拉紮的就不列了, 其中表頭跟內容是互相對應的

再來可以試著把景點名稱列表在畫面上

var str = '';
json.result.records.forEach((item) => {
    str += '<div>' + item.Name + '</div>';
});
document.querySelector('#myDiv').innerHTML = str;

https://ithelp.ithome.com.tw/upload/images/20200528/20118686DN6ZMWU4Hl.jpg

再加個景點照片並讓元素並排試試, 這邊偷偷用一下ES6, 好讀一點

//每列5個項目
str += `
    <div style="float:left; width:20%;">
        <img src="${item.Picture1}" style="width:80%; max-height:100px;" />
        <div>${item.Name}</div>
    </div>`;

https://ithelp.ithome.com.tw/upload/images/20200528/201186864ID2qCq5H5.jpg
景點照片出來後越來越有感了!!

最後加上一些其他的資訊, 並把style寫成class引用進來

str += `
    <div class="myitem">
        <img src="${item.Picture1}" class="myimg" />
        <div title="${item.Toldescribe}">${item.Zone} - ${item.Name}</div>
        <p class="myp">開放時間: ${item.Opentime}</p>
        <p class="myp">地址: ${item.Add}</p>
        <p class="myp">電話: ${item.Tel}</p>
    </div>`;
.myitem {
    float: left;
    width: 20%
}
.myimg {
    width: 80%;
    max-height: 100px;
}
.myp {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

https://ithelp.ithome.com.tw/upload/images/20200528/20118686fMCVSPlkxe.jpg


最後的程式碼長這樣
沒有雲端只好放截圖給大家看看xD
https://ithelp.ithome.com.tw/upload/images/20200528/201186867kOtwqcQil.jpg


Ajax抓資料呈現的部分差不多就是這樣囉~!!/images/emoticon/emoticon34.gif
剩下的就是進人事聽天命xD

再來會開始紀錄我的Vue學習筆記與心得~敬請期待!!/images/emoticon/emoticon29.gif


尚未有邦友留言

立即登入留言