JavaScript - создаем динамический поиск (используем события js, fetch, map, filter, forEach, regex)
HTML-код
- Опубликовано: 27 дек 2022
- В этом видео мы создадим форму динамического поиска станций московского метро, используя "ванильный" JavaScript.
Мы будем работать с DOM элементами на странице, получать данные из удаленного API с помощью fetch, а также фильтровать данные с помощью regex.
В рамках проекта мы также будем использовать различные методы JS, включая: map, filter, forEach.
Файлы для начала работы: t.me/stackdevru/64
Мои Курсы:
React для начинающих: react001.ru
JavaScript для начинающих: js001.ru
Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog
Классный формат: не слишком долгий и полезный.
Было бы здорово увидеть в подобном формате какой-то не слишком сложный проект с ООП. Эта тема редко встречается, хочется понять как это делать правильно.
P.s. Всем советчикам в комментариях, которые "знают как лучше было сделать" большой привет и пожелания крепкого здоровья!
Спасибо за поддержку!
Как говорят: если пытаетесь решить проблему регуляркой, значит у вас теперь 2 проблемы - это регулярка и ваша проблема.
По сути, можно и обычными includes и toLowerCase() решить, НО, в рамках обучения, можно и regex.
Like!
Регулярки огонь, если их знать. Если слабо знаешь, то действительно, это больше проблема
Что бы стразу же получать данные из поля ввода можно повесить на него input.addEventListener('input', (e)=>{
//ваш код
})
Вернулся!
Спасибо
Ура!
💥💥💥
Интересное и полезное видео. Благодарю за труд! Только вопрос: api со станциями метро сами делали или есть готовое решение? Like!!!
Спасибо! Есть несколько опубликованных апи со станциями...
А можно ли добится подобного функционала если писать в старом стандарте es5?
Странно, что преподаёте фетч, но ловить ошибки не учите. По вашей ссылке на json - 404. Странно, что еще нет вопросов, типа "все как в видео делаю, а станции не получаю". Всегда нужно проверять респонс (if(!response.ok)). И естественно .catch((error) => )...
Да, надо catch тоже использовать! Но не в этом дело, автор показывает одно из решений этой задачи. А остальное все мелочи, можно самому добавить что хочете, github, SQL Server, итп....
лови лайкосик
Хм.... странно... проделать ВСЮ работу в функции и потом проверить на нужность!
А еще в подмене нужно использовать $&, а не введеное значание, иначе регистры сломаются
text.replace(regExp, '$&')
👍
Здравствуйте, подскажите почему при замене в 39строке стрелочной функции station => на обычную -function(station) код падает? (перестает корректно выделять буквы). Как вообще правильно здесь будет заменить стрелочную на function?
Нужно курить документацию по JS, конкретно раздел "this у стрелочных функций"
А зачем фраг g? Если есть одно совпадение в названии, то этого уже достаточно
Еще можно через startsWith решить
startsWith будет искать по началу строки, а регулярки по всем буквам
Ахахах, почему match, если совпадение затем нигде не используется? Тогда test() достаточно, match очень сильно грузит проц на нормальном объеме (не учебном)
странные решение) Сложно, о простом)
а как проще?
Зачем же так усложнять 😂