LINQ 與 JSON

JSON 幾乎已經成了最通的用資料交換格式,Client/Server 的運算環境都可以輕易的支援,也因此幾乎被利用在任何格式資料查詢的 LINQ 想當然耳也可以用來查 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 資料萃取操作上,當你需要操作複雜的網頁資料時,這是個不錯的方式。


沒有留言: