文件 v1.2.1
首頁 GitHub

資料載入

本頁說明 NanoJSON 接受哪些資料來源、初始設定與 import() 如何載入資料，以及各種載入失敗時的實際結果。

初始資料設定

json / file / path 三個設定欄位可指定初始資料，以 config.file ?? config.json ?? config.path 取第一個非 null 的值（JSONEditor.js:60），因此同時提供時 file 優先：

// 從 JavaScript 物件載入
const editor = new JSONEditor({
  id: "editor",
  json: { name: "NanoJSON", version: "1.2.1" },
});

// 從遠端 URL 載入
const editor = new JSONEditor({
  id: "editor",
  file: "https://example.com/data.json",
});

三者皆未提供時，編輯器以空物件 {} 啟動，並自動呼叫一次 insert() 新增一個空節點。

資料來源與失敗行為

所有來源都經過 getJSON()（src/function/getJSON.js）：

傳入值 處理方式 失敗時
null / undefined 視為無資料 以 {} 載入
File FileReader.readAsText 後 JSON.parse 解析失敗印出 Failed to parse JSON from file ...，以 {} 載入
物件或陣列 直接使用 —
string（URL） fetch 後 JSON.parse 網路錯誤或解析失敗印出 Failed to fetch data from ...，以 {} 載入；HTTP 狀態非 2xx 時 Promise 永不 resolve（getJSON.js:29），初始化停在載入階段、import() 不會重新渲染
其他型別（數字、布林） 印出 Invalid data [_type]: ... 以 {} 載入

陣列可以載入，但根層輸出時不會保留陣列形式，見序列化。

執行期匯入：import() 與 reset()

editor.import(data) 接受同一組來源，載入後以 #jsonToChildren() 重建全部節點，再呼叫 render(true)；初次渲染已完成時會觸發 Lifecycle.update（300ms 防抖後執行 beforeUpdate / updated）。

editor.reset() 等同 import({})。與初始化不同，import() 不會在結果為空時自動 insert()，所以重設後編輯器沒有任何節點，需按「新增」或呼叫 insert()。

內建按鈕

頁尾按鈕對應的動作：

按鈕 顯示條件 動作
Add 一律顯示 insert()
Open button.import 為真 開啟 accept=".json" 的檔案選擇器，選取後 import(file)
Download button.export 為真 confirm("Download?") 確認後 export()
Reset button.reset 為真 confirm("Reset?") 確認後 import({})

延伸閱讀

EN