在不丢失索引的情况下搜索 JS 数组 - Working Codepen Demo 使用 fetch() 和 Alpine.js

Question

我这里有一个可用的 CodePen 演示：https://codepen.io/JosephAllen/pen/vYmQpWL?editors=0010

这个演示：

从 API
根据“分数”对列表进行排序属性
然后显示使用索引作为“排名”的排序列表。换句话说，如果您的指数为零，那么您就是第一名。

有一个用于搜索和过滤列表的输入字段，但过滤数组会为每个用户创建一个新索引——这会破坏排名的整个概念。

如何在不为用户创建新索引的情况下保持排名和搜索功能？

如果我是 API 的作者，我会把排名列为属性，但我不是。

我的获取函数：

getUsers() {
    fetch(`https://trafficthinktank.com/wp-json/mjtw/v1/community`)
        .then((res) => res.json())
        .then((data) => {
            this.isLoading = false;
            this.users = data.sort((a, b) => b.points - a.points);
            // this.users = this.users.map(user => ({ visible: true, ...user }));
            console.log(this.users);
        });
    0;
}

我的过滤函数：

get filteredUsers() {
    if (this.search === "") {
        return this.users;
    }

    return this.users.filter((item) => {
        return item.name.toLowerCase().includes(this.search.toLowerCase());
    });
}

Answer 1

索引不能保持不变，因为在其索引序列中不能有缺失数字的数组。不过，您可以简单地映射您的数组并在其中保留索引。看看这个，可能会有帮助：

getUsers() {
    fetch(`https://trafficthinktank.com/wp-json/mjtw/v1/community`)
        .then((res) => res.json())
        .then((data) => {
            this.isLoading = false;
            this.users = data.sort((a, b) => b.points - a.points);
            // this.users = this.users.map(user => ({ visible: true, ...user }));
            this.users = this.users.map((entity, index) => ({index, entity}));
            console.log(this.users);
        });
    0;
}

然后你可以这样过滤

get filteredUsers() {
    if (this.search === "") {
        return this.users;
    }

    return this.users.filter((item) => {
        return item.entity.name.toLowerCase().includes(this.search.toLowerCase());
    });
}

在不丢失索引的情况下搜索 JS 数组 - Working Codepen Demo 使用 fetch() 和 Alpine.js

Search JS array without losing index - Working Codepen Demo uses fetch() and Alpine.js

javascript

fetch

codepen

alpine.js