Реагировать на фильтр в элементе в массиве - PullRequest
0 голосов
/ 20 января 2019

Я пытаюсь вернуть отфильтрованный список в mobx хранилище, но не могу понять, как правильно работает функция фильтра. У меня есть массив, который выглядит следующим образом

      @observable files = ([
        {
        id: '1',
        fileType: 'Document',
        files: [
            {
              name: 'test1',
              size: '64kb',
              date: '2018-01-19'
            },
            {
              name: 'test2',
              size: '94kb',
              date: '2018-01-19'
            }
        ]
      },
      {
      id: '2',
      fileType: 'List',
      files: [
          {
            name: 'test3',
            size: '64kb',
            date: '2018-01-19'
          },
          {
            name: 'test4',
            size: '94kb',
            date: '2018-01-19'
          },
          {
            name: 'test5',
            size: '94kb',
            date: '2018-01-19'
          }
      ]
    } and so on...

Я хочу иметь возможность фильтровать по всем именам this.files[x].files[x].name а затем вернуть результат. Если я установлю «Что положить сюда» на this.files[0].files[0].name, я смогу отфильтровать первую запись имени. Но как я могу фильтровать динамически по всем именам?

  @observable filter = ""
  @computed get filteredFiles(){
    var matchesFilter = new RegExp(this.filter, "i")
    var filtered = this.files.filter(file => !this.filter || matchesFilter.test(What to put here?))
    return filtered
  }

1 Ответ

0 голосов
/ 20 января 2019

Изменить matchesFilter.test(What to put here?) на

file.files.some(nestedfile=>matchesFilter.test(nestedFile.name))

если вы хотите также отфильтровать внутренний список файлов только по тем, которые соответствуют, то вам нужно .map массив

var filtered = this.files
  .filter(file =>
    !this.filter || file.files.some(nestedfile => matchesFilter.test(nestedFile.name)))
  .map(file => ({ ...file,
    files: file.files.filter(nesstedFile => matchesFilter.test(nestedFile.name))
  }));
...