iT邦幫忙

1

網站篩選條件

想請問一下各位大大我想要像一些購物網站或租房網站一樣可以依條件動態篩選,譬如說我今天點了 7000 ~ 8000 的區塊就顯示符合條件的資料。內容有辦法不依靠 ajax 取資料庫的資料來篩選嗎?具體來說該怎麼做呢?

先謝謝各位的回覆!

3
dragonH
iT邦超人 5 級 ‧ 2019-10-23 14:31:30
最佳解答

內容有辦法不依靠 ajax 取資料庫的資料來篩選嗎

可以阿

但是你可能必須一次把 database 的資料取回來

再用 Array.map 或 Array.filter 來篩選

你覺得會比較好嗎 /images/emoticon/emoticon48.gif

例如我這個 codepen

唯一的 ajax 就只有

https://www.gsp.gov.tw/iTaiwan/itw_tw.json

其他類似搜尋的功能

都是用 Array.filter 做的

看更多先前的回應...收起先前的回應...

dragonH 謝謝~我可能會朝著array.filter的方向去做

請問大大能提供給我使用AJAX篩選的範例嗎? 感激不盡

dragonH iT邦超人 5 級 ‧ 2019-10-23 19:24:18 檢舉

ppp753951555

Ajax 沒有篩選的功能呀

如果你是要問 filter 的話

範例如下

const items = [1,2,3,4,5];
const result = items.filter((item) => item > 3); // 會回傳 大於 3 的 item

參考

謝謝H大大我學會怎麼篩選,目前能在console裡看到成功的篩選我要的條件~~感恩/images/emoticon/emoticon34.gif

dragonH iT邦超人 5 級 ‧ 2019-10-23 22:52:35 檢舉

ppp753951555

/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif/images/emoticon/emoticon42.gif

mapforEach

也可以去了解一下

參考

一定也會很常用到

e.g.

map 可以根據你的需求

組成一個新的 array

const items = [1,2,3,4,5];
const result = items.map((item) => item += 1);
// 把每個項目 +1後回傳一個新的 array
// [2, 3, 4, 5, 6]

forEach 跟 for loop 的用途差不多

但是比較易讀

dragonH請問 H 大就是我目前已經篩選成功
我該怎麼做去放進 pug 呢?因為是用 pug 去跑迴圈叫出全部的資料的不知道該如何將原本的所有資料改成我篩選的呢?想教一下這個問題。
謝謝
這是我個codepen:https://codepen.io/ppp753951555/pen/dyyWGBe

dragonH iT邦超人 5 級 ‧ 2019-10-24 18:47:37 檢舉

ppp753951555

codepen 我記得他的

js 跟 html 是分開的

所以沒辦法從 js 那欄傳值給在 html 那的 pug

恩恩抱歉 因為我想表達我的問題QQ

具體來說我想要製造的效果是像 591一樣

https://rent.591.com.tw/?kind=0&region=6

點擊上面的條件就能自動篩選

但是我用 filter() 篩選完以後的下一步不曉得該怎麼做

該怎麼把他用在 pug 顯示呢?

因為是用 each articles, i in article 來取 JSON 的資料顯示在網頁上有點無從下手

dragonH iT邦超人 5 級 ‧ 2019-10-24 20:02:31 檢舉

ppp753951555

這就跟你用的語言有關了

如果你是用 nodejs 的話

就可以把 pug 當成 view-engine 用

就可以傳參數到 pug

然後 render 出來

官方 doc

dragonH 您好~我朋友似乎就是這樣做來顯示資料資料的。

$("#book-btn").click(function() {
    $.ajax({
        type: 'get',
        url: 'http://localhost:3000/articles/data',
        success: function(data) {
            function price(data) {
             return data.filter(item => item.rent >= 7000)
            }
            console.log(data);
        }
    });
});
each articles, i in article
        section.item-list
        ....以下省略

想請問怎麼讓點了#book-btn就能讓article的資料變成篩選完的資料。

先謝謝您耐心的解答我那麼多疑惑!

dragonH iT邦超人 5 級 ‧ 2019-10-24 21:45:53 檢舉

ppp753951555

你好像有點誤會 pug 的用法了

pug 一般是用在後端透過變數

在後端 render 完後

送回前端

所以你真要用 pug

可以這樣寫

script.
    $("#book-btn").click(function() {
        $.ajax({
            type: 'get',
            url: 'http://localhost:3000/articles/data',
            success: function(data) {
                function price(data) {
                 return data.filter(item => item.rent >= 7000)
                }
                console.log(data);
            }
        });
    });

只是

拿到 data 後

pug 並不會幫你重新 render view

真要完全用 pug

頂多也只是以 pug 寫呼叫其他 lib 的 code

所以

你這需求

我覺得用 vue 之類的 前端 lib 會比較方便

請問那個lib有什麼方向去找嗎?我現在有點沒頭緒怎麼做了XD

dragonH iT邦超人 5 級 ‧ 2019-10-24 21:59:12 檢舉

ppp753951555

應該就是 vue 了

最簡單也最萬用

react 也行

但是 react 的學習曲線比較陡

codepen with react

好的謝謝dragonH大的建議我這個小專題做完以後會去學習vue的~

dragonH iT邦超人 5 級 ‧ 2019-10-24 22:42:14 檢舉

/images/emoticon/emoticon12.gif

0
小魚
iT邦大師 1 級 ‧ 2019-10-23 14:45:36

如果資料量大不建議這樣做,
這樣你的網站很快就掛了,
通常都是用ajax或是POST的方式處理.

小魚你好~資料大概就10~20筆我想應該不會掛。但之後也會試試看AJAX的方法 謝謝建議~

0
耿直小伙
iT邦新手 4 級 ‧ 2019-10-23 15:29:34

以7000~8000元這個條件來篩選會不會掛掉取決於資料量
因此無論是否使用ajax都必須限制取得資料筆數
再來如果不想用ajax取得資料
那就用傳統的網址參數換頁吧

程式狗 假如真的不行我會嘗試您說的傳統換頁只是想先試試看能不能不換頁去做篩選。 謝謝建議~

小魚 iT邦大師 1 級 ‧ 2019-10-23 17:57:09 檢舉

使用Ajax沒有換頁啊.

我要發表回答

立即登入回答