Фильтровать данные по 2 значениям

avatar
Anirudh Giran
8 августа 2021 в 16:46
20
2
0

Я создаю приложение с требованием наличия 2 строк поиска. Один для поиска по имени, а другой для поиска по тегу. Поиск также должен работать, когда пользователь вводит в строку поиска и имя, и тег.

Данные из API имеют формат

{
 "students" : [
   {
    "city": "city",
    "company" : "company",
    "email" : "email",
    "firstName" : "firstName",
    "grades" : ["12", "54"],
    "id" : "1",
    "lastName" : "lastName",
    "pic" : "url",
    "skill" : "skill"
   },
 ],
}

Мое приложение работает на https://temp-application.netlify.app/

В настоящее время приложение выполняет поиск по имени, как и должно быть. Но как только я присоединяю к нему функционал поиска по тегам. Все ломается.

Вот как я реализовал поиск по имени и тегу.

useEffect(() => {
        let filteredResults = results.filter((result) => {
            const name = result.firstName + " " + result.lastName;
            const isName = name
                .toLowerCase()
                .includes(searchName.toLowerCase());

            const tags =
                result.tag !== undefined ? result.tag.toString() : false;
            const isTag =
                typeof tags === "string"
                    ? tags.toLowerCase().includes(searchTag.toLowerCase())
                    : false;

            return isName && isTag;
        });

        setStudents(filteredResults);
    }, [searchName, searchTag]);

Обратите внимание, что массив tag отсутствует в объекте, возвращаемом API

Источник

Ответы (2)

avatar
Anirudh Giran
9 августа 2021 в 03:22
0

Я решил это. Проблема заключалась в том, что я пытался выполнить поиск за один раз. Но вместо этого мне нужно было создать цепочку if-else для достижения результата.

Вот конечная функция

        let filteredResults = results.filter((result) => {
            const name = result.firstName + " " + result.lastName;
            const tags =
                result.tag !== undefined ? result.tag.toString() : false;

            if (searchName !== "" && searchTag === "") {
                return name.toLowerCase().includes(searchName.toLowerCase());
            } else if (searchName === "" && searchTag !== "") {
                return typeof tags === "string"
                    ? tags.toLowerCase().includes(searchTag.toLowerCase())
                    : false;
            } else if (searchName !== "" && searchTag !== "") {
                const isName = name
                    .toLowerCase()
                    .includes(searchName.toLowerCase());
                const isTag =
                    typeof tags === "string"
                        ? tags.toLowerCase().includes(searchTag.toLowerCase())
                        : false;

                return isName && isTag;
            } else if (searchName === "" && searchTag === "") {
                return true;
            }
            return false;
        });

        setStudents(filteredResults);
    }, [searchName, searchTag]);
avatar
Piyush Choughule
8 августа 2021 в 17:31
0
  1. Ссылка, которую вы дали, не работает.
  2. Для тегов вы ищете в строке «тег» в объекте «Студент (результат)», но в предоставленных данных нет ключевого именованного тега.
  3. Даже если у вас есть ключ тега, вы, вероятно, не получите результат, потому что вы делаете "&&" вместо "||"