Фильтрация массива объектов Javascript
HTML-код
- Опубликовано: 3 окт 2024
- Фильтрация массива с объектами по свойствам. Применение на практике.
👁🗨 Телеграм: t.me/frontend_du2
👁🗨 Discord: / discord
👁🗨 VK: frontend
👁🗨 Дзен: dzen.ru/frontend
👁🗨 Rutube: rutube.ru/u/fr...
Обучаюсь в скиллбоксе, в разделе JS ничего похожего даже нет, преподают сухую инфу, и без примеров.
Все доходчиво, понятно, и самое главное на примере видно, где и как можно использовать! Спасибо)) Помогли сделать дз)
Спасибо вам за ваш комментарий. Записываю видео без подготовки и всегда стараюсь говорить своим языком. Возможно где то запинаюсь и говорю некорректно, но наверное это задает тон живого общения с зрителем. Я работаю над улучшением. Спасибо вам. В видео на курсе немного другой формат, но думаю там тоже скоро будут изменения :)
я тоже там обучаюсь и нередко вижу сообщения в чате о том что кто-то совсем ничего не понимает, и мало инфы, увы я такой же. прохожу 6-ой модуль но ВООБЩЕ не вдупляю как и что и никто не объясняет.
@@alex_dudukalo судя по тому, что с момента выхода вашего видео прошел год - изменений не наблюдается. Я бы не смогла там учиться без ваших роликов.
Что новые, что старые видео Александра - топ! Отменный образовательный контент! Сижу, тренирую массивы и подсматриваю сюда. Большое спасибо!
Безумно приятно читать такие комментарии ☺ спасибо! Ваша поддержка очень вдохновляет))
Учусь в скиллбоксе, На js только Вашими и немного другими видео и спасаюсь. Скилл бокс мало даёт разбора и способов применения. Набираешь в скиллбоксе кучу знаний и не понимаешь как этим пользоваться, пока разберёшся может уйти пару минут , а может день и месяц и 2-3 недели. После todo list сначал захожу к Вам, смотрю, пока уляжется прохожу задания, потом возвращаюсь прохожу вместе, вставляя свои нюансы, подглядываю у других. Быстро не выходит - нужно нейронным связям видимо образоваться и закрепить навык. отличная подача материала и разбор вопросов.
Очень понятно и доходчиво! Как раз в проекте своём нужно реализовать фильтры! Логику понимал, а с помощью Вашего видео теперь и общий шаблон-функцию смогу написать! Спасибо! Супер! Гораздо больше информативности чем в других подобных видео с тысячами просмотров!
Здравствуйте, Стас. Прошу прощения за долгий ответ. Месяц был в завале. Но теперь я тут, буду снимать новые ролики :) Полезность видео - важнейшая оценка работы. Уж тем более, если вы применили это в реальной практической работе. Спасибо, что поддержали меня откликом :)
Спасибо вам большое, в одном видео понял больше, чем в 10 таких же по тематике других
Я очень рад, что помог в этом видео разобраться) И так же спасибо за поддержку :)
Уважаемый Александр, перезапишите, пожалуйста, все видео по модулям JS в Skillbox. Вы очень хорошо объясняете. Многие нюансы указываете.
А то ничего непонятно, сухая теория и приходится гуглить многое, чтобы понять.
Спасибо за ваш комментарий :) Я планирую сделать что то такое в рамках канала. Будет курс по базовой части языка, которую вы сможете посмотреть на ютубе )
Спасибо, Александр! С вами никаких курсов не нужно! Вы суперпрофи!
Как всегда все очень доступно и интересно объяснялось. Спасибо вам! Очень многому учусь у вас!
Спасибо вам за ваш комментарий ) Буду стараться регулярно делать ролики. Не всегда получается ответить вовремя (
Александр, огромное спасибо, за очередное крутое видео !
Много их у вас пересмотрел, эо наверное пока на первом месте !)
Как то вы тут, по подаче по содержанию ... И вот тому, что в конце все тосно понятно !
Повторюсь, за все видео спасибо ! Просто это как то особенно хотелось выделить )
Особенно хочу отметить момент, когда вы в конце прошлись по всему коду и еще раз разложили все по полочкам, объяснили ряд моментов.
Спасибо вам за такой информативный отзыв и что отметили важные моменты, которые понравились :) Буду стараться делать это чаще в следующих роликах (итоговые прогон кода) Думаю, действительно это полезно :) Большое вам спасибо за комментарий и поддержку
Всё очень грамотно объяснили. Всё чётко, всё по теме. Спасибо огромное.
Павел, спасибо за Вашу поддержку! Очень рад, что видео оказалось Вам полезно 😊
Спасибо за очень подробный разбор и понятные объяснения! :)
Спасибо за ваш комментарий, надеюсь и другие видео курса будут вам полезны 🤗
Все понятно и ясно👍 Нужно больше практиковаться что бы вот так же без подсматривания взять и самому написать этот код.
Спасибо за видео!
Всегда приятно помочь :)
Спасибо вам большое, добрый человек, помогли решить задание
Огромное спасибо за такое доступное объяснение.
Александр спасибо за видео, значительно экономит время обучения, отпадает надобность обращаться с вопросами в чат
ВЫ МЕНЯ ООЧЕНЬ СПАСЛИИ!!! СПАСИБО
Я рад, что видео вам помогло ) Спасибо за комментарий :)
Классная и понятная подача информации. Спасибо за Ваш труд
Спасибо за ваш комментарий😊 ваша поддержка очень важна
Александр, я понимаю, что видео было записано год назад, и возможно кто-то писал об этом. Мне кажется я нашел ошибку. На 12 минуте когда вы пишите arr = filter(user, 'age', 17) вы перезаписываете переменную arr c новым массивом содержащим результат повторного выполнения фукнции filter. И arr содержит объекты отфильтрованные по возрасту из массива users, а не из массива с объектами лиц ФИО которых содержит "Иван". Переменная с массивом перезаписывается вторым вызовом filter. То же самое происходит и с "Евгениями". Впечатление уточнения поиска по дополнительным параметрам создается из-за того, что массив со всеми лицами содержит два объекта в которых есть "Иван" и только у них возвраст 17, и трех "Евгениев" и только у них возраст 21.
Здравствуйте, спасибо за ваш комментарий. Вы довольно хорошо описали ситуацию (ошибку) но кажется я не понял, что именно вы имели ввиду :( В итоге мы получаем массив только с теми элементами, которые удовлетворяют запросу. Или я ошибаюсь? Прошу прощения за долгий ответ.
@@alex_dudukalo Правильно так: let arr = filter(users, 'fio', 'Евгений')
arr = filter(arr, 'age', 21)
@@alex_dudukaloсделайте в массиве Иванам или Евгениям разные возраста и вы приятно удивитесь ;)
@@alex_dudukalo Не понять объяснение в комментарии, на который вы ответили, можно только людям с iq ниже чем у автора канала. Больше похоже на то, что вы видите ошибку, но вам лень перезаписывать и исправлять это
@@ВладимирВладимирович-ы4б5лсамый умный и не ленивый пользователь ютуба тут как тут
Все оч круто и подробно. Спасибо за видео
Большое спасибо вам за отклик
Спешу поделиться) Нашла свою ошибку в фильтрации. Изначально был глобальный массив и вся фильтрация проходила по нему, занося результат в локальный массив который и рендерился. Действительно просто...надо было просто скопировать глобальный массив в локальный и потом его же фильтровать и перезаписывать)
Отлично. Я рад, что у вас получилось разобраться. По опыту проверок, примерно так и понимал, что в этом будет ошибка ) Здорово
Помню, помню эту задачку! Скил прокачивает мощно!
Да, решил разобрать фильтрацию. Это очень популярный вопрос :)
Александр, спасибо за Ваши разборы! Очень помогали в прохождении курса верстки. Сейчас прохожу JS, но дается с трудом (ощущение, что ничего не откладывается в голове). Понимаю, что нет волшебной таблетки, но все же подскажите пожалуйста вектор направления по изучению JS, где лучше практиковать и тд.
Спасибо за ваш отклик. Пожалуй я по этой теме запишу отдельный ролик. Что делать, если трудно. И поделюсь своим опытом. Я могу порекомендовать вам выполнять больше практических работ. Чем больше практики, тем лучше. Рекомендую попросить вашего куратора дать до материал для выполнения работы. Он поделится ссылками на интересные задачи. Думаю это может вам помочь )
Спасибо огромное! Очень понятно, очень полезно!
Спасибо вам. Рад, что видео приносит пользу :)
Спасибо за видео!!! Всё получилось.
Спасибо вам :) Рад, что ролик вам помог :)
Классное и понятное видео
Я рад, что видео помогло вам разобраться :) Спасибо за просмотр )
raxmat juda ajoyib video 👍👍👍👍👍👍👍👍👍
:)
спасибо, горячая клавиша чтобы открыть терминал это ctrl + ~, и кстати все команды что ты вводишь в терминал сохраняются в истории, тебе не обязательно их заново вводить, терминалы во-первых с правой стороны сохраняются, а во-вторых, чтобы заново ввести команду можно просто стрелку вверх нажать
Спасибо, буду использовать ) На маке немного другая комби нация клавиш, но думаю дело привычки :)
Отличные видео. Помогают быстрее освоить JS.
Рад таким откликам и тому, что изучение идет быстрее :)
Супер фильтр,классное видео,очень полезно,но есть один ньюанс функция фильтра не реагирует на регистр букв,к примеру если имя начинается с большой буквы ,а мы его ищем с маленькой то нам ничего не вернет фильтр ,я думаю это минус
Спасибо за ваш комментарий :) Да-да, вы правы. Игнорирование регистра сильно бы улучшило код. Здесь можно применить метод tolowercase для строк. У вас получилось или хотите это внедрить?
Спасибо большое за видео!
Спасибо вас за просмотр и комментарий :)
! + arrowUp чтобы не писать каждый раз node js....)) Спасибо большое за урок)
Хотя возможно не у всех так)
Очень понравилось и полезно
Спасибо за обратную связь 🤗
Очень полезный урок! Опять пишу комментарий смотрю. Но теперь когда воспользовался этим фильтром, всплыла проблемка.) Филтровать получается можно только в одном порядке? Сперва по имени, а потом по годам. В обратном не получается, сперва по годам, а потом по имени. Или это все же нормально?
Добрый день, большое спасибо за видео! Очень помогло. У меня вопрос, как фильтровать без нажатия на кнопку? Я имею ввиду ты начинаешь набирать текст и результат сразу отображается.
Спасибо за ваш комментарий :) Один из вариантов сделать запуск таймера при событии input текстового поля. В таймере прописывать фильтрацию. То есть при вводе чего-либо в input будет постоянно запускаться фильтрация )
Было бы неплохо выкладывать исходники файлов.
Ну спасибо!!! 👍👍👍
Спасибо за отзыв 🤗
Александр, подскажите, пожалуйста, зачем мы вызываем render (users) в конце?
Это важно сделать для первой отрисовки контента, когда страница загружается :) Если в массив, что-то добавлено, то мы сразу увидим это при загрузке страницы :)
Спасибо большое
Спасибо вам :)
Коллеги, здравствуйте! Во время просмотра видео возникло 2 вопроса: 1) Автор пытается отфильтровать целочисленное поле методом includes. Получается, если в выборке есть записи с возрастом в один порядок (до 10 лет), то попытка отфильтровать их приведет к добавлению в результат лишних записей. 2) При вызове итоговой ф-и автор два раза в качестве первого аргумента использует массив users. Соответственно должен два раза фильтроваться исходный массив, а итогом должна быть выборка по возрасту, но не по ФИО. Как получился верный результат, мне не понятно. Я считаю, что во втором вызове нужно подставлять в ф-ю массив arr - выходной результат первого выполнения ф-и filter.
Здравствуйте, спасибо за ваш комментарий. Попытаюсь разобрать вопросы (может быть не правильно их понял) Все числовые значения сначала будут преобразованы в строчные и потом применяется includes. Про лишние значения не совсем понял. Покажите пример такого массива? По второму вопросу. Сначала мы копируем исходный массив arr и далее, как вы и сказали - последовательно фильтруем один и тот же массив. Двумя заходами)
Чтобы каждый раз не вводить имя файла в терминале просто воспользуйся стрелкой вверх на клаве
Да крутая штука :) Консолью не так часто пользовался. Но ваша подсказка действительно упращает работу )) Спасибо
Подскажите, как сделать фильтрацию по дате окончания обучения? При условии, что дата окончания обучения не вводится пользователем, а выводится относительно даты начала обучения + 4
В if де запускається метод includes необов'язково перевіряти на true тому що функція і так повертає логічне значення.
а можно как-то реализовать фильтрацию через arr.filter() ?
Да, конечно. Более того, я бы рекомендовал его использовать. По сути я в виде такую функцию (filter) написал сам :) Что бы показать, как это работает внутри для большего понимания. arr.filter() - отличное решение :)
А исходники есть с объектом и CSS ?
К сожалению этот ролик один из первых, которые я записывал и в тот момент не сохраняли исходники. Прошу прощения ща долгий ответ :(
@@alex_dudukalo просто иногда не хватает файлов HTML CSS или JSON . их наличие облегчает процесс изучения.
@@artyrdanilov2791 Да, понимаю вас ) Поэтому все новые ролики публикую с исходниками в телеграме :)
Зачем в if делать проверку на 56 строке таким образом? Метод includes и так возвращает true или false, а вы потом это true/false проверяете равняется ли оно true. Если в круглых скобках убрать "== true" - результат будет тот же)
P.S. использовать оператор нестрогого равенства в JS - вот что по настоящему плохой тон)
не пойму, как у вас на 12:20 сработал код... вы ведь 2 раза фильтровали массив users, то есть он должен был сперва в переменную arr запушить всех, кто в users содержит "Иван", а потом ЗАМЕНИТЬ содержимое arr всеми, у кого возраст 17. Как это сработало? Ведь чтобы сработало, вы должны сперва фильтровать users на ФИО, а потом уже фильтровать arr на возраст, но не users.
Просто я в точности копировал ваш код и он как раз каждый раз тупо брал из users)
Здравствуйте, спасибо за комментарий. Да, в видео неточность и ошибка. Думаю я добавлю это в описание. В исходном массив два Ивана с возрастом 17. Поэтому, получается такой результат. Да, лучше сделать, как указали вы. Сначала фильтровать users, потом arr
@@alex_dudukalo спасибо Вам
Здравствуйте! Как можно сделать фильтрацию при вводе нижнего регистра?
Добрый день! Скажите, как можно фильтровать пользователей по диапазону возраста, например >25лет, но
Здравствуйте, Для этого в условии должно быть следующее условное выражение
if(obj.age > 25 && obj.age < 55) {
result.push(obj)
}
фильтруешь по Ивану, а получаешь Иванову и тому подобных? отличный фильтр)))
а что делать если в одном поле 2 числа не рассказали как отфильтровать года обучения
ответил вам ранее )
👍
а что если мне на до отфильтровать по двум именам? например, Иван и Алёна тоже?
Хороший вопрос :) В этом случае условие добавление элементов в массив будет сложнее. Там будет участвовать два параметра :)
Привет!
У тебя нет канала на рутубе или дзене?
Приветствую, пока не доходят руки до других платформ :)
А если нужно отобрать строго ИВАН, а не ИВАНов, сИВАНчан, дИВАНошвили и прочее составные? Где разбор строгого фильтра?!
Думаю можно записать такой ролик. Но в целом, тут все просто. Нужно переделать условие и убрать includes. Это может выглядеть так:
let result = []
if(obj[prop] === value) {
result.push(obj)
}
второй раз попадаюсь в ловушку, когда хочется написать item.prop)) Потом понимаю, что в объекте нет ключа prop.
)) Да, отфильтровать будет не просто, с несуществующим свойством )
+
Спасибо 🤗
И что, данные о пользователе на сайте зиписываются именно в файл js?
Не уверен, что понял вопрос. Но не думаю, что хорошая идея изменять js файл. Да и скорее всего не получится его перезаписать из браузера )
не знаю, что тут такого отличного О_о. Например для меня, как инвалида по слуху, данное видео пользы вообще не принесло. Спикер экает, бекает, что то себе под нос бубнит. К тому же у спикера дикция далека от идеала, что так же добавляет непонятностей. Зря потраченное время в попытке понять что он рассказывает. да и как бы товарищ похоже не в курсе что есть родной метод для массивов и как не странно называется так же filter
Здравствуйте, Андрей. Подскажите, я вас чем то обидел?
@@alex_dudukalo да, ментор из тебя никакой. Ты поступил как говнюк просто слившись
Вопрос такой - почему у меня
const fioVal = document.getElementById('inp-fio').value;
console.log(fioVal); // выдает пустое значение, хотя ввод сделан.
А
const fioVal = document.getElementById('inp-fio');
console.log(fioVal.value); // нормально выдает значение инпута.
Я думал - почему не работает функция должным образом, а оказывается первый вариант почему-то не работает.
Как так? Почему у вас работает, а у меня нет?)
Тут могу только догадываться, ибо не вижу весь код и файлы. Подозреваю, что id указан не так, как в html файле. Но это только вариант. Должно работать нормально. Нужно смотреть файлы )
ошибки у тебя конечно детские
Подскажите , что именно вы имеете ввиду ?
@@alex_dudukalo передача свойств в функцию
function filter(arr, prop, value) {
let result = [],
copy = [...arr];
for (const item of copy) {
if (String(item[prop]).includes(value) == true) result.push(item);
}
return result;
}
function render(arr) {
const list = document.querySelector('.users-list');
list.innerHTML = '';
const fioVal = document.getElementById('inp-fio');
const ageVal = document.getElementById('inp-age');
let newArr = [...arr]
console.log(newArr) // Выводит полный скопированый массив
if (fioVal !== '') newArr = filter(newArr, 'fio', fioVal)
if (ageVal !== '') newArr = filter(newArr, 'age', ageVal)
console.log(newArr) // Выводит пустой массив
for (const user of newArr) {
const li = document.createElement('li');
li.textContent = user.fio + ', Age: ' + user.age
list.aconsole.log(newArr)ppend(li);
}
};
document.getElementById('filter-form').addEventListener('submit', function (event) {
event.preventDefault();
render(users);
console.log('submit');
})
render(users);
В итоге у меня на странице пустой список. В чем дело, не понимаю... Подскажите пожалуйста
Здравствуйте, выгрузите пожалуйста работу в облако и вышлите ссылку, я посмотрю :)