縹緲's blog

既然是讀取 Json 資料顯示在手機上，表示 Server 端可能是你自己或是別人提供的，你只是透過 RESTful 的方式來呼叫取得資料而已…如果還有印象的話，這次我們仍要沿用之前用過的一個資料，就是「臺北市旅服中心服務據點資訊」，網址為 http://data.taipei.gov.tw/opendata/apply/NewDataContent?oid=8AC76ABB-A384-4968-AD3C-9E8E9D238168，開啟該網頁，你如果細心一點的話，你會看到台北市政府資料開放平台其實提供兩種格式，第一種是 CSV，另外一個就是 Json 嚕

首先，Delphi XE5 有提供一個新的工具，不過顯然是忘記放在 Tools 的 Menu 裡面了，不過沒關係，你可以自己加入，透過 Menu->Tools->Config Tools...如下圖

然後依據下述畫面逐一鍵入相關資料...

就完成將此工具增加在 Menu 上

開啟此工具後，將之前提到的 Json 網址，鍵入在 URL 欄位中，如下

然後按下 Send Request，切換下面 Tab Control 到 Tabular Data 頁籤，神奇的事情發生了，竟然已經轉為 Dataset 的方式來顯示 Json 資料

這個工具對於事前準備或瀏覽 Json 格式的資料非常有幫助。接下來，該怎麼把資料顯示在手機上呢？

老樣子，新增一個專案後，先置放一個 TListView，並且把 Align 設定為 alClient

然後依序置放 XE5 開始提供的新元件共四個，分別是 TRESTClient、TRESTRequest、TRESTResponse、TRESTResponseDataSetAdapter，然後再放一個老朋友...TClientDataSet，都放好的話會如下圖

接下來，把 Json 那段網址貼到 RESTClient1.BaseURL 這個欄位，RESTResponseDataSetAdapter1.Dataset 設定為 ClientDataSet1，RESTResponseDataSetAdapter1.Response 則設定為 RESTResponse1，如下圖

接下來在 RESTRequest1 元件上按滑鼠右鍵，選擇 Execute...如下圖

執行成功的話，你會得到

這時候 ClientDataSet1 已經自動 Active 了，接下來就用之前說明過的 Bind Visually...，將 ClientDataSet1 的 Name 這個 Field 指到 ListView1.Text

again....比賽結束

to be continued...