Поиск в массиве JS без потери индекса — рабочая демонстрация Codepen использует fetch() и Alpine.js

avatar
Joseph Farruggio
8 августа 2021 в 23:56
239
1
2

У меня есть рабочая демонстрация CodePen здесь: https://codepen.io/JosephAllen/pen/vYmQpWL?editors=0010

Эта демонстрация:

  1. Выбирает пользователей из API
  2. Сортирует список на основе свойства "точки"
  3. А затем отображает этот отсортированный список, используя индекс в качестве «ранга». Другими словами, если ваш индекс равен нулю, вы на первом месте.

Есть поле ввода для поиска и фильтрации списка, но фильтрация массива создает новый индекс для каждого пользователя, что разрушает всю идею ранга.

Как сохранить рейтинг и функцию поиска без создания новых индексов для пользователей?

Если бы я был автором 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());
    });
}
Источник

Ответы (1)

avatar
Farhad Rad
9 августа 2021 в 00:21
3

Индексы не могут оставаться постоянными, так как не может быть массива с отсутствующим числом в его индексной последовательности. Тем не менее, вы можете просто отобразить свой массив и сохранить индексы внутри. Посмотрите на это, может быть полезно: 

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());
    });
}