JSON 幾乎已經成了最通的用資料交換格式,Client/Server 的運算環境都可以輕易的支援,也因此幾乎被利用在任何格式資料查詢的 LINQ 想當然耳也可以用來查 JSON 。
JSON 格式的支援橫跨了 Client 與 Server ,因此相關技術也必須分成兩個部份來談,今天先來看 Client 的部份,如果要在網頁上運用 LINQ 查詢 JSON 資料,必須用純粹的 JavaScript 函式庫,jLinq 可以讓我們達到這個目的,按一下底下的截圖至相關的網站下載:
按一下其中的 ZIP 按鈕即可進行下載的程序,解開壓縮檔,有一個 jlinq.js ,將其引用進入網頁即可透過 LINQ 查詢 JSON 資料。考慮以下的 JSON 格式資料:
這是一個由 JSON 格式資料所組成的陣列資料,現在,我打算透過 LINQ 語法萃取出其中 chapter_NO 大於 6 的資料,並且將其標題逐一輸出如下:
首先將 jlinq.js 配置於 javascript 資料夾,在網頁一開始的時候,加入以下這一行程式碼:
接下來於網頁上配置一個 <ul> 標籤如下,用來呈現所取得的標題資料,
現在撰寫以下的 JavaScript :
其中以紅色標示的程式碼透過 LINQ 取出 chapter_NO 大於 6 的所有資料,接下來的迴圈則逐一取出其中每一筆資料的 chapter_title 欄位內容。
好了,你看到了 LINQ 如何運用在 JavaScript 中的 JSON 資料萃取操作上,當你需要操作複雜的網頁資料時,這是個不錯的方式。
JSON 格式的支援橫跨了 Client 與 Server ,因此相關技術也必須分成兩個部份來談,今天先來看 Client 的部份,如果要在網頁上運用 LINQ 查詢 JSON 資料,必須用純粹的 JavaScript 函式庫,jLinq 可以讓我們達到這個目的,按一下底下的截圖至相關的網站下載:
按一下其中的 ZIP 按鈕即可進行下載的程序,解開壓縮檔,有一個 jlinq.js ,將其引用進入網頁即可透過 LINQ 查詢 JSON 資料。考慮以下的 JSON 格式資料:
var novel =
[
{ "chapter_NO": 0, "chapter_title": "00.序章", "content": 'chapter0' },
{ "chapter_NO": 1, "chapter_title": "01.烽火", "content": 'chapter1' },
{ "chapter_NO": 2, "chapter_title": "02.手機", "content": 'chapter2' },
{ "chapter_NO": 3, "chapter_title": "03.意外", "content": 'chapter3' },
{ "chapter_NO": 4, "chapter_title": "04.愛苗", "content": 'chapter4' },
{ "chapter_NO": 5, "chapter_title": "05.寄情", "content": 'chapter5' },
{ "chapter_NO": 6, "chapter_title": "06.背叛", "content": 'chapter6' },
{ "chapter_NO": 7, "chapter_title": "07.北往", "content": 'chapter7' },
{ "chapter_NO": 8, "chapter_title": "08.曙光", "content": 'chapter8' },
{ "chapter_NO": 9, "chapter_title": "09.疏離", "content": 'chapter9' },
{ "chapter_NO": 10, "chapter_title": "10.誤解", "content": 'chapter10' },
{ "chapter_NO": 11, "chapter_title": "11.重逢", "content": 'chapter11' },
{ "chapter_NO": 12, "chapter_title": "12.釋懷", "content": 'chapter12' },
{ "chapter_NO": 13, "chapter_title": "13.領悟", "content": 'chapter13' },
{ "chapter_NO": 14, "chapter_title": "14.防線", "content": 'chapter14' },
{ "chapter_NO": 15, "chapter_title": "15.攤牌", "content": 'chapter15' },
{ "chapter_NO": 16, "chapter_title": "16.遺憾", "content": 'chapter16' }
] ;
這是一個由 JSON 格式資料所組成的陣列資料,現在,我打算透過 LINQ 語法萃取出其中 chapter_NO 大於 6 的資料,並且將其標題逐一輸出如下:

首先將 jlinq.js 配置於 javascript 資料夾,在網頁一開始的時候,加入以下這一行程式碼:
<script src="javascript/jlinq.js" type="text/javascript"></script>
接下來於網頁上配置一個 <ul> 標籤如下,用來呈現所取得的標題資料,
<ul id="chapters" style=" list-style-type:none;">
</ul>
現在撰寫以下的 JavaScript :
window.onload = function () {
var results = jLinq.from(novel).greater('chapter_NO', 6).select();
var ul = document.getElementById('chapters');
for (var i = 0; i < results.length; i++) {
var li = document.createElement('LI');
var span = document.createElement('SPAN');
span.innerHTML = results[i].chapter_title;
li.appendChild(span);
ul.appendChild(li);
}
};
其中以紅色標示的程式碼透過 LINQ 取出 chapter_NO 大於 6 的所有資料,接下來的迴圈則逐一取出其中每一筆資料的 chapter_title 欄位內容。
好了,你看到了 LINQ 如何運用在 JavaScript 中的 JSON 資料萃取操作上,當你需要操作複雜的網頁資料時,這是個不錯的方式。
沒有留言:
張貼留言