Фильтр не работает, нужна помощь, чтобы понять, когда использовать значение дочернего массива

Question

Я пытаюсь отфильтровать значения, которые пользователь вводит во вход.но не получить ожидаемый результат.пожалуйста, помогите мне понять, что неправильно я делаю здесь ..

вот код:

    const staticData = [
  {name:'name1', firstChild:[{firstChild1:'firstChild1'}]},
  {name:'name2', firstChild:[{firstChild1:'firstChild2'}]},
  {name:'name3', firstChild:[{firstChild1:'firstChild3'}]}
]


filterIt($event) {
    this.list = staticData;
    const current = {firstChild1:$event.target.value};
    this.list = this.list.filter(o => Object.keys(current).every(k => o['firstChild'].filter(c => {
      return String(c[k]).toLowerCase().includes(String(current[k]).toLowerCase())
    }) ));
  }

просто введите 3, поэтому я должен получить только 1 значение, но не получаю никакого выхода

Демонстрационная версия

Answer 1

Это работает как первоначально ожидаемое:

filterIt($event) {
    this.list = staticData;
    const current = {firstChild1:$event.target.value};
    return this.list.filter(o => Object.keys(current).every(k => o['firstChild'].filter(c => {
      return String(c[k]).toLowerCase().includes(String(current[k]).toLowerCase())
    }).length ));
  }

Вам нужно только добавить .length и return this.list....

.length, потому что *Метод 1011 * ожидает логические значения, но вы возвращаете массив, как если бы пустой массив мог быть оценен как ложный или false, но это не так.Но вы можете использовать свойство .length этого массива (которое возвращает количество элементов в нем), и любое ненулевое значение равняется true, тогда как 0 равняется false (спасибо @Edric).

return this.list..., чтобы избежать undefined.

Answer 2

радикально изменил вам filterIt функцию.Это гораздо проще, чем вы думаете.

filterIt($event) {
    this.list = staticData.filter(x => {
        var obj = x.firstChild.filter(y => {
            return String(y.firstChild1).toLowerCase().includes(String($event.target.value).toLowerCase());
        });
        return obj.length > 0;
    })
}

Здесь x равно

{name:'name1', firstChild:[{firstChild1:'firstChild1'}]}

, а y равно

{firstChild1:'firstChild1'}

, если поиск соответствует, тогда obj имеет некоторый элемент в нем.Затем, проверяя, имеет ли obj значение length > 0, мы получаем желаемый результат.

Answer 3

Чтобы увидеть эффекты фильтра на странице, мы устанавливаем видимое свойство внутри массива, который устанавливается функцией фильтра - и мы используем ngIf в HTML, чтобы увидеть эффекты:

релевантный HTML :

<input type="text" (keyup)="filterIt($event)">
<ul>
  <ng-container *ngFor="let value of list">
    <li *ngIf='value?.visible'>
      {{value.name}}
      <div>First Child</div>
      <div *ngFor='let fchild of value.firstChild'>
        {{fchild.firstChild1}}
      </div>
    </li>
  </ng-container>
</ul>

релевантно TS :

const staticData = [
  { name: 'name1', firstChild: [{ firstChild1: 'firstChild1' }], visible: true },
  { name: 'name2', firstChild: [{ firstChild1: 'firstChild2' }], visible: true },
  { name: 'name3', firstChild: [{ firstChild1: 'firstChild3' }], visible: true }
];

 filterIt($event) {
    this.list = staticData;
    const current = { firstChild1: $event.target.value };
    this.list = this.list.filter(o => Object.keys(current).every(k => o['firstChild'].filter(c => {
      o.visible = String(c[k]).toLowerCase().includes(String(current[k]).toLowerCase());
      //return String(c[k]).toLowerCase().includes(String(current[k]).toLowerCase());
    })));
  }

работает стекаблиц здесь