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


 



1.重要觀念:
(A).client端讀取文字檔,要等待這個函數讀完,jsonstring 才會完整正確
(B).所以,解析jsonstring的工作必須在另外一個函數來做 initialjsonDoc()
(C).必須分兩階段來處理,也就是cilient端讀取json,一定要有兩個按鈕,第1個是opfile對話方塊(show01()函數),第2個是將jsonstring轉成xmlDoc物件的函數initialjsonDoc()(在上一頁previous(),下一頁next(),在這兩個函數裡面呼叫initialjsonDoc())
(D).但在上一頁裡面的有個問題:因為要判別是否下一個已經超過極限,if(i>jsonDoc.length){i=0;},第一次執行next(),jsonDoc書籍物件還沒有值undefined,
所以要先判斷if(jsonDoc == undefined){initialjsonDoc();}若是書籍jsonDoc物件還沒有值undefined,就去執行initialjsonDoc(),將jsonstring轉成jsonDoc。


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

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

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:initialjsonDoc()將字串轉成jsonDoc物件

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

(4).步驟3:以上一筆,下一筆顯示資料

步驟1:建立next()函數來控制到下一筆

function next() {
if(jsonDoc == undefined){initialjsonDoc();}
i++;
if(i>jsonDoc.length){i=0;}
changedata(i);
}

步驟2:建立previous()函數來控制到下一筆

function previous() {
if(jsonDoc == undefined){initialjsonDoc();}
i--;
if(i<0){i=jsonDoc.length-1;}
changedata(i);
}

步驟3:建立顯示單筆資料的changedata(i)

var i=0;
var jsonDoc;
function changedata(i)
{
str ="書名:" + jsonDoc[i].title;
str +="<br/>作者:" + jsonDoc[i].author;
str +="<br/>類別:" + jsonDoc[i].category;
str +="<br/>出版日期:" + jsonDoc[i].pubdate;
str +="<br/>書號:" + jsonDoc[i].id;

document.getElementById("id01").innerHTML = str;
}

(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"
}
]