Javascript,XML 轉 JSON

/

本篇要解決的問題

平常調用公司同事給的 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));
    })
})

得到的資料會像這樣:

XML 轉 JSON 後的資料
XML 轉 JSON 後的資料

可以看到所有捷運站的資料都在 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: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <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 的樣式,最後出來會像這樣:

marker 放上地圖
marker 放上地圖

最後放上一個套件,下一篇文章會寫到的「Leaflet.Locate」,點擊左上角的箭頭按鈕,便可以定位目前所在的位置,看到附近有什麼捷運站了。

Summary
Javascript,XML 轉 JSON
Article Name
Javascript,XML 轉 JSON
Description
本篇大綱:本篇要解決的問題。下載 JS 程式碼。取 XML 資料並轉成 JSON。轉出 JSON 的資料放進 OSM。本篇除了一個套件,也會實作取一個政府公開的 XML 資料,並放進開源的地圖 OSM 裡,再加上 marker,製作一個捷運站點地圖。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

Let's Write

前端工程師 August 的學習筆記 — solving problems, in simple ways.

Follow us Telegram GitHub