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

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

ppp753951555

Ajax 沒有篩選的功能呀

如果你是要問 filter 的話

範例如下

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

參考

謝謝H大大我學會怎麼篩選，目前能在console裡看到成功的篩選我要的條件~~感恩

ppp753951555

map 跟 forEach

也可以去了解一下

參考

一定也會很常用到

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

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 的資料顯示在網頁上有點無從下手

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的資料變成篩選完的資料。

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

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