本篇要解決的問題
平常調用公司同事給的 API，大部份收到的都是 JSON，但總會遇到資料格式是 XML 的狀況，像是一些政府公開資料。而把 XML 轉成 JSON，在用迴圈渲染資料上頁面時會比較方便，也比較習慣。
找了幾個套件，發現大小都蠻大的，而比較小的卻只能在 Node.js 上執行，後來千找萬找，找到了一個很輕量的，XML 轉 JSON，及 JSON 轉 XML，二個加起來不到 10 K。
因為 function 在官方說明頁面就有了，因此本篇除了推薦這個套件，也會實作取一個政府公開的 XML 資料，並放進開源的地圖 OSM 裡，再加上 marker，製作一個捷運站點地圖。
本篇使用的程式碼來源：
https://goessner.net/download/prj/jsonxml/
最後實作出的 Demo 頁：
https://letswritetw.github.io/letswrite-xml-to-json/
下載 JS 程式碼
進到官方說明頁面後，會看見有二個 JS 檔可以下載：
本篇會使用的是 xml2json.js，將取到的 XML 資料轉成 JSON。
下載好 xml2json.js 後，別急，還有一個 function 需要複製下來，說明文件往下滑一點，會看到一個名為 parseXml 的 function，把這個 function 的程式碼存下來，就可以準備來實作資料轉檔了。
本篇的 Demo，有將 JS 下載起來，並合併成檔案，是為了方便以後要用時可以取用，範例程式碼會用 import 的方式引入。
import { parseXml, xml2json } from 'xml2json';
fetch('xxxxxxx')
.then(res => res.text())
.then(res => {
let data = xml2json(parseXml(res), '')
console.log(JSON.parse(data));
})
取 XML 資料並轉成 JSON
這次在政府開放資料平台上，找到一個 XML 的資料：臺北捷運車站資料服務，裡面會回傳捷運各個站的地址、座標。
把資料 fetch 回來，console.log 會看到回來的資料：
import { parseXml, xml2json } from 'xml2json';
document.addEventListener('DOMContentLoaded', () => {
const api = 'https://ptx.transportdata.tw/MOTC/v2/Rail/Metro/Station/TRTC?$format=xml';
fetch(api)
.then(res => res.text())
.then(res => {
const data = xml2json(parseXml(res), '')
console.log(JSON.parse(data));
})
})
得到的資料會像這樣：
可以看到所有捷運站的資料都在 data.ArrayOfStation.Station 裡，把它存進變數後就可以來使用。
轉出 JSON 的資料放進 OSM
這幾天正在回頭看 Leaflet.js + OpenStreetMap，本篇來做一個把資料裡的座標丟進開源地圖的 Demo。
Leaflet + OSM 的學習筆記在這，這邊不會把每一行在做什麼的說明都寫出來，請各位自己打開連結看囉：
Demo 頁上主要就是地圖繪好後，把每個捷運站的座標寫進 marker 裡，marker 綁 Popup 寫捷運站的名稱及地址。
繪製地圖的部份，找一個深色模式的地圖：
const center = [25.03, 121.57];
const zoom = 13;
const map = L.map('map').setView(center, zoom);
L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);
第一步繪上基本地圖的樣子：
接著就是把從 XML 轉成 JSON 的資料，用迴圈把座標、站名、地址給取出來，建 marker 放上地圖。
Array.prototype.forEach.call(dataFormat, data => {
let lat = data.StationPosition.PositionLat;
let lon = data.StationPosition.PositionLon;
let name = data.StationName.Zh_tw + '站';
let address = data.StationAddress;
let marker = L.marker([lat, lon], {
title: name
}).bindPopup(`<b>${name}</b><br/>${address}`)
.addTo(map);
})
本篇的 Demo 有客製 marker 的樣式，最後出來會像這樣：
最後放上一個套件，下一篇文章會寫到的「Leaflet.Locate」，點擊左上角的箭頭按鈕，便可以定位目前所在的位置，看到附近有什麼捷運站了。
Top comments (0)