好用JSON Editor
程式技術/Javascript 2011/12/30 12:22 views: 22280 times
在開發網頁程式, 用到解析和產生 JSON 是經常發生的事, 不過如何快速的解析或是產生 JSON , 又或是用來除錯這些 JSON 的資料, 不像 XML 可以利用瀏覽器來幫忙, JSON 可以利用這個作者 Thomas - http://www.thomasfrank.se/about.html 開發的工具來進行 JSON 的線上測試.
說明在這裡: http://www.thomasfrank.se/json_editor.html
他有線上使用版, 和下載版, 若是進行除錯, 可以直接使用線上版: http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html
以之前文章 http://diary.tw/tim/22 的資料為例:
將內容貼到 JSON Editor 裡, 按下 save 鍵, 就會產生出該 JSON 的樹狀結構在該 editor 左側(記得要自己按下 + 號展開, 如下圖:
這樣可以很容易的理解及看出該 JSON 資料的內容. 若是要取得某一節點, 可以點在該節點上, 並看 editor 上的 label及下面的 value 就可以利用程式取出該 JSON 資料結構的資料點, 以上面的 array1 中的 1 為例, 圖示如下:
這樣是不是十分方便, 對於在使用 JSON 的開發上, 有十足的加速作用呢!
在開發網頁程式, 用到解析和產生 JSON 是經常發生的事, 不過如何快速的解析或是產生 JSON , 又或是用來除錯這些 JSON 的資料, 不像 XML 可以利用瀏覽器來幫忙, JSON 可以利用這個作者 Thomas - http://www.thomasfrank.se/about.html 開發的工具來進行 JSON 的線上測試.
說明在這裡: http://www.thomasfrank.se/json_editor.html
他有線上使用版, 和下載版, 若是進行除錯, 可以直接使用線上版: http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html
以之前文章 http://diary.tw/tim/22 的資料為例:
{ 'obj1': {
'child1':'value1',
'child2':'value2'
},
'array1': [1, 2, 3, 4, 5]
};
'child1':'value1',
'child2':'value2'
},
'array1': [1, 2, 3, 4, 5]
};
將內容貼到 JSON Editor 裡, 按下 save 鍵, 就會產生出該 JSON 的樹狀結構在該 editor 左側(記得要自己按下 + 號展開, 如下圖:
這樣是不是十分方便, 對於在使用 JSON 的開發上, 有十足的加速作用呢!
Waiting...