HTML5 表單元件:client端,開啟book.json文字檔,再以表格形式顯示資料(下載book.json)
(要用chrome才能查詢到json資料)


 


 


1.重要觀念:
(A).client端讀取文字檔,要等待這個函數讀完,jsonstring 才會完整正確
(B).所以,解析jsonstring的工作必須在另外一個函數來做 parsejson()
(C).必須分兩階段來處理,也就是cilient端讀取json,一定要有兩個按鈕,第1個是opfile對話方塊,第2個是將jsonstring轉成jsonDoc物件的函數,


2.重要觀念:
在client端是無法用loadjson的方式讀進整個json物件的,所以若要在client 端讀進json的資料,變通的方法是,以『字串』的方式讀入(而非json物件),讀入後再將字串轉成json物件

3.步驟1:第1個函數show01()讀入純文字的步驟

(A) 開啟檔案元件

var jsonstring ="";
function show01(fileinfo) {
//讀取json到字串jsonstring
file = fileinfo.files[0];
var fReader = new FileReader();
fReader.onload = function (event) {
jsonstring = event.target.result;
};
fReader.readAsText(file);
}

(3).步驟2:函數2:parsejson()將字串轉成jsonDoc
jsonDoc本身就是一個物件變數陣列,操作法就更傳統javascript的物件變數陣列一樣

function parsejson(){
var jsonDoc = JSON.parse(jsonstring);
}

(4).步驟3:將jsonDoc輸出成表格資料

str ="<table border=1><tr><td>書名</td><td>作者</td><td>類別</td><td>出版日期</td><td>書號</td></tr>";

for (i=0;i<jsonDoc.length;i++) {
str +="<tr><td>" + jsonDoc[i].title;
str +="</td><td>" + jsonDoc[i].author;
str +="</td><td>" + jsonDoc[i].category;
str +="</td><td>" + jsonDoc[i].pubdate;
str +="</td><td>" + jsonDoc[i].id;
str +="</td></tr>";
}
str +="</table>";
document.getElementById("id01").innerHTML = str;

(4).表格的標籤語法:<tr列,<td欄

<table border=1>
<tr>
<td>學號</td><td>姓名</td><td>電話</td><td>電子郵件</td>
</tr>

(5).book.json內容

[
{
"title": "Dreamweaver CC 網站設計",
"author": "鄧文淵",
"category": "網頁設計",
"pubdate": "05/2014",
"id": "web001"
},
{
"title": "ASP.NET 3.5 網頁程式設計",
"author": "陳會安",
"category": "網頁設計",
"pubdate": "07/2014",
"id": "web002"
},
{
"title": "C#.NET 程式設計",
"author": "曹祖聖",
"category": "程式設計",
"pubdate": "11/2012",
"id": "prog001"
},
{
"title": "jQuery Mobile設計",
"author": "陳會安",
"category": "手機設計",
"pubdate": "06/2014",
"id": "mobile001"
}
]