Как отфильтровать массив объектов со вложенными массивами?

Question

[Comnox]

Столкнулся с такой проблемой, что не получается отфильтровать массив по введенному значению в строке поиска в watch-ере, не пойму, как учитывать, что массив savedProjects у объекта может быть пустой:

const journal = [{
  date: 15.11.2020,
  temperature: 5
  savedProjects: [{
    id: 1,
    name: 'first',
  },
  {
    id: 2,
    name: 'second',
  },
  {
    id: 3,
    name: 'third',
  }]
},
{
  date: 20.11.2020,
  temperature: 18
  savedProjects: [{
    id: 5,
    name: 'first',
  },
  {
    id: 6,
    name: 'second',
  }]
}, 
{
  date: 22.12.2021,
  temperature: 22,
  savedProjects: []
}]

watch: {
    searchString(value) {
      this.filteredProjects = journal.filter(
        (project) => {
          return project.savedProjects.length
            ? project.savedProjects.filter((item) => {
                return item.name.toLowerCase().includes(value.toLowerCase());
              })
            : "";
        }
      )
    }
  }

Comments

[WbICHA]

Какой тип данных должен возвращать калбек в фильтре?

[Comnox]

WbICHA, массив из отфильтрованных обьектов

[WbICHA]

Comnox, перечитай мой вопрос.

Answer 1

[0xD34F]

отфильтровать массив по введенному значению в строке поиска в watch-ере

Для таких вещей принято использовать computed:

computed: {
  filteredProjects() {
    const search = this.searchString.toLowerCase();

    return this.journal.flatMap(n => {
      return n.savedProjects.filter(m => m.name.toLowerCase().includes(search));
    });
  },
  ...

Comments

[Comnox]

спасибо большое за ответ, очень помогли, только не пойму как можно еще учитывать что массив savedProjects у некоторых обьектов может быть пустой

[0xD34F]

Всё учитывается - нет разницы, с каким массивом работать, пустым или нет. Может, вы не до конца понимаете значение словосочетания "пустой массив"? Случайно не путаете с "массив отсутствует"? Если так - проверяйте, чем является savedProjects, если не массив, тогда вместо выполнения фильтрации сразу возвращайте пустой массив:

filteredProjects() {
  const search = this.searchString.toLowerCase();

  return this.journal.flatMap(n => Array.isArray(n.savedProjects)
    ? n.savedProjects.filter(m => m.name.toLowerCase().includes(search))
    : []
  );
},