如何在表上使用 .filter()?

How do you use .filter() on a table?

提问人:TraktorJack 提问时间:5/20/2021 更新时间:5/20/2021 访问量:200

问:

我在表上使用 .filter() 时遇到问题。它由 5 个单元格组成,我需要根据最后一个单元格(索引 4)的内容/值过滤表格。它有 3 个可能的值:“Node.JS”、“ReactJS”和“AngularJS”。如果用户希望为“Node.JS”过滤表,我希望删除所有表数据(仅html,我将所有内容保存到localStorage),并将所有包含“Node.JS”的行添加到新对象(filteredData)。然后我希望在新对象上调用我的 createTable 函数,但我似乎无法正确过滤它。我哪里出错了?任何帮助都是值得赞赏的(请不要JQuery):)

function filterTable() {
        const filterBy = document.getElementById('filter'); // filter option select
        const rows = table.rows;
        const savedData = JSON.parse(localStorage.getItem('data'));
        let filteredData = savedData.filter(function () {
            for (let i = 1; i < rows.length; i++) { // i = 1 to skip header
                if (filterBy.value === 'Node.JS' && rows[i].cells[4].innerText === 'Node.JS') {
                    filteredData = savedData.filter(rows[i].cells[4].innerText); // I tried using return, but that only stops the function
                } else if (filterBy.value === 'ReactJS' && rows[i].cells[4].innerText === 'ReactJS') {
                    filteredData = savedData.filter(rows[i].cells[4].innerText);
                } else if (filterBy.value === 'AngularJS' && rows[i].cells[4].innerText === 'AngularJS') {
                    filteredData = savedData.filter(rows[i].cells[4].innerText);
                }
                console.log(filteredData);
            }
        })
    }
JavaScript 过滤器

评论

0赞 Dave Newton 5/20/2021
我不确定我是否理解。如果目的是创建与其中某些内容匹配的数据列表,则只需过滤并忽略表中的任何内容即可。savedDatasavedData
0赞 K Kreid 5/20/2021
您能否发布存储在本地存储中的数据示例,即 savedData ?
0赞 TraktorJack 5/20/2021
下面是一个示例: {name: “bilbo”, nachname: “baggins”, bday: “20.05.2021”, beruf: “Hobbit”, veranstaltung: “Node.JS”}
0赞 TraktorJack 5/20/2021
@DaveNewton 代码会是什么样子?你说的有道理,但不知道如何应用它:/

答:

0赞 Alen.Toma 5/20/2021 #1

您以错误的方式使用过滤器。

以下是如何使用的示例filter()

var array = [{name:"Alen"}, {name:"Toma"}]
var filterValue = "al"

var result = array.filter(function(x){ return x.name.toLowerCase().indexOf(filterValue.toLowerCase()) != -1})


console.log(result)

评论

0赞 Alen.Toma 5/20/2021
现在,我为什么要这样做?此示例中的存储数据是一个数组,因此它将与我的变量数组相同
0赞 TraktorJack 5/20/2021
{name: “bilbo”, nachname: “baggins”, bday: “20.05.2021”, beruf: “霍比特人”, veranstaltung: “Node.JS”}
0赞 Alen.Toma 5/20/2021
这不是一个数组,而是一个对象,所以你可以检查你是否可以使用,或者使用Object.valuesObject.namesfilter()
0赞 TraktorJack 5/20/2021
SavedData 实际上是一个对象数组。它实际上看起来像这样:[{名称:“比尔博”,纳赫名称:“巴金斯”,bday:“20.05.2021”,贝鲁夫:“霍比特人”,维兰斯塔通:“节点.JS”}]
0赞 Alen.Toma 5/20/2021
因此,您可以使用我的例子轻松完成
0赞 TraktorJack 5/20/2021 #2

我已经想通了,这就是我让它为自己工作的方式。我会把这个问题留出来,以防有人可以使用它。感谢大家的帮助 <3

function filterTable() {
        const filterBy = document.getElementById('filter'); // filter option select
        const savedData = JSON.parse(localStorage.getItem('data'));
        let filteredArray;
        if (filterBy.value === 'Node.JS') {
            filteredArray = savedData.filter(function (e) {
                return e.veranstaltung === 'Node.JS';
            })
        } else if (filterBy.value === 'ReactJS') {
            filteredArray = savedData.filter(function (e) {
                return e.veranstaltung === 'ReactJS';
            })
        } else if (filterBy.value === 'AngularJS') {
            filteredArray = savedData.filter(function (e) {
                return e.veranstaltung === 'AngularJS';
            })
        }
        for (let i = 0; i < filteredArray.length; i++) {
            createTable(filteredArray[i]);
        }
    }