嵌套JSON資料自動回寫HTML網頁

嵌套JSON資料自動回寫HTML網頁

本文介紹解析來自MongoDB資料庫的JSON嵌套字串，按HTML介面元素自訂屬性展現資料內容的解決方案及技術實現代碼。

HTML網頁定義

表單展示資料回寫測試 JavaScript

這是表單資料解析樣本.

名稱：
通過自訂屬性“fieldtype”來定義資料類型。

測試展示表單資料

標題：
年齡：
多行子表單，欄位屬性定義為“subid”，表單按資料欄位屬性定義，標識出含有子表，屬性為“subtable”單獨定義列數，其他不變。

資料名稱	資料類型	數值

結束標誌：

注，表單定義規則如下：
（1） 使用Label回顯頁面資料；
（2） 在label中，自訂屬性“fieldid”，如果是表（table），則區別自訂屬性為“subid”；
（3） 在表〈table〉的元素中，增加自訂屬性subtable，其屬性值為表格的列數。

在設計頁面時，多行子表單的定義，必須按規則設計，要求如下：

需要有表頭行； 事先定義出一行資料。

此用法必須使用〈!DOCTYPE〉 聲明，所有瀏覽器都支援 〈!DOCTYPE〉 聲明。
定義和用法：

〈!DOCTYPE〉 聲明必須是 HTML 文檔的第一行，位於〈html〉 標籤之前。 〈!DOCTYPE〉 聲明不是 HTML 標籤；它是指示 網頁瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。 在 HTML 4.01 中，〈!DOCTYPE〉 聲明引用 DTD，因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。 HTML5 不基於 SGML，所以不需要引用 DTD。

提示：請始終向 HTML 文檔添加 聲明，這樣瀏覽器才能獲知文件類型。

JavaScript代碼

<script>//表單增加插入一行function insertRow(){  var dytb_id = 'dynamictable';  var dy_row_num = document.getElementById(dytb_id).rows.length;  //取table中第二行儲存格集合  var dy_row = document.getElementById(dytb_id).rows[1].cells;  //在table末尾，追加一行  var dytb=document.getElementById(dytb_id).insertRow(dy_row_num);  for (i = 0;i

其中JSON資料內容及格式如下所示：

{name:測試JSON,title:測試標題,subtable:[{fieldid:資料名稱a,fieldtype:string},{fieldid:資料名稱b,fieldtype:number},{fieldid:資料名稱c,fieldtype:datetime}],flag:測試結束！}

按系統設計，此JSON資料是通過Webservice，從MongoDB資料庫取出來的BSON資料。資料中“鍵-值”對的“鍵（key）”與HTML網頁上lable的自訂屬性“fieldid”或“subid”所對應。

如下順序圖表為處理JSON資料展現的簡明原理，其中，略去讀取MongoDB資料庫的過程及內容。

Created with Raphaël 2.1.2瀏覽器瀏覽器HTML頁面HTML頁面JS函數JS函數MongoDBMongoDBJSON對象JSON對象設計頁面，自訂屬性（）擷取JSON資料（）讀取BSON資料（）遍曆HTML介面元素（）parse（JSON字串）按介面元素索引值擷取JSON對象的值（）

註：關於JSON在以下文檔模式中受到支援：Internet Explorer 8 標準模式、Internet Explorer 9 標準模式、Internet Explorer 10 標準模式、Internet Explorer 11 標準模式。此外，也在市集應用（Windows 8 和 Windows Phone 8.1）中受支援。
在以下文檔模式中不受支援：Quirks、Internet Explorer 6 標準模式、Internet Explorer 7 標準模式。