JavaScript讀取Json檔案
HTML底下的Script區塊，使用Json檔，應該算是滿常見的需求，特別是如果某些表單選項，不打算從資料庫讀取，或是打算讀取一些靜態設定檔都滿好用的，但是JavaScript其實不能直接讀取Json檔，所以這邊紀錄一下自己常用的兩種寫法
一、使用getJSON、Fetch、Axios等
在目錄底下新增一份options.json檔，個人路徑是wwwroot/jsons，因使用ajax相關技術，須留意檔案位置是否為可讀取的靜態檔案路徑
1
2
3
4
5
6
7
|
{
"機械與電腦輔助":["機械設計開發","機械性能測試","機械結構分析","機電整合設計","智慧製造導入","精密量測與檢測",
"刀具設計","模具設計","機械材料表面處理"],
"材料科學":["材料檢測與分析","儲能材料開發","材料表面處理與改質","發光材料開發與元件設計","半導體製程開發與元件設計",
"奈米材料製備與批量化設計","薄膜製造技術開發","複合材料與材料接合技術","積層製造","非破壞檢測",
"太陽能電池材料開發與元件設計","顯示器與固態照明材料開發與設計"]
}
|
1
2
3
4
5
6
7
8
9
|
<script>
fetch('wwwroot/jsons/options.json')
.then(function (response) {
return response.json();
})
.then(function (result) {
console.log(result);
});
</script>
|
結果
二、使用JavaScript import、export
將Json檔，改為Js檔，如:options.json.js 或 options.js
1
2
3
4
5
6
7
|
export const option = {
"機械與電腦輔助":["機械設計開發","機械性能測試","機械結構分析","機電整合設計","智慧製造導入","精密量測與檢測",
"刀具設計","模具設計","機械材料表面處理"],
"材料科學":["材料檢測與分析","儲能材料開發","材料表面處理與改質","發光材料開發與元件設計","半導體製程開發與元件設計",
"奈米材料製備與批量化設計","薄膜製造技術開發","複合材料與材料接合技術","積層製造","非破壞檢測",
"太陽能電池材料開發與元件設計","顯示器與固態照明材料開發與設計"]
};
|
使用import
1
2
3
4
|
<script type="module">
import { option } from '/wwwroot/jsons/options.json.js';
console.log(option);
</script>
|
補充，MDN上面也有一篇關於讀取Json檔的方法
參考:https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/JSON
1
2
3
4
5
6
7
8
9
10
|
<script>
var requestURL = 'wwwroot/jsons/options.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
console.log(request.response);
}
</script>
|
結論
讀取順序略有不同，但結果是相同的，個人選擇是，看Json檔是否有與後端共用，若後端也會使用，如統計各選項被選擇幾次、匯出選項之類的，會採用純Json檔(第一種方法)，方便C#或Java讀取，如果僅是作為前端處理或靜態選項，則採用第二種方法。
