Как фильтровать массив объектов по совпадению строки поиска с любым свойством?

Question

[mosikus]

Есть объект:

const searchtest = [
  { id: "01", name: "Text1" },
  { id: "02", name: "Text12" },
  { id: "03", name: "Text123" },
  { id: "04", name: "Text1234" },
  { id: "05", name: "Text12345" },
  { id: "06", name: "Text123456" },
  { id: "07", name: "Text1234567" },
  { id: "09", name: "Text12345678" },
  { id: "10", name: "Text12345678910" }
];

Читаю инпут и вывожу соответствующий id или name:

onChange = e => {
    this.setState({ search: e.target.value });
  };

  get searchtest() {
    const search = this.state.search.toLowerCase().trim();
    return parseInt(search) >= 0 ? searchtest.filter(({ id }) => id.toLowerCase().indexOf(search) > -1) : searchtest.filter(({ name }) => name.toLowerCase().indexOf(search) > -1);
  }

<div>
        <input
          value={this.state.search}
          onChange={this.onChange}
          placeholder="Введи id или name"
        />

        <div>
          {this.searchtest.map((kef, i, a) => (
            <div>
              <div key={kef.name} data-id={kef.name}>
                name: {kef.name}
              </div>
              <div key={kef.id} data-id={kef.id}>
                id: {kef.id}
              </div>
            </div>
          ))}
        </div>
      </div>

Но тут я немного впал в ступор. Не получается. Хочу добавить, например, ещё number:

const searchtest = [
  { id: "01", name: "Text1", number: "111" },
  { id: "02", name: "Text12", number: "222" },
  { id: "03", name: "Text123", number: "333" },
  { id: "04", name: "Text1234", number: "444" },
  { id: "05", name: "Text12345", number: "555" },
  { id: "06", name: "Text123456", number: "666" },
  { id: "07", name: "Text1234567", number: "777" },
  { id: "08", name: "Text1234567", number: "888" },
  { id: "09", name: "Text12345678", number: "999" },
  { id: "10", name: "Text12345678910", number: "101010" }
];

Как сделать, чтобы фильтровало при вводе id, name или number?

https://codesandbox.io/s/vigilant-https-uumlg

Answer 1

[0xD34F]

get searchtest() {
  const search = this.state.search.toLowerCase().trim();
  return search
    ? searchtest.filter(n => Object.values(n).some(m => m.toLowerCase().includes(search)))
    : searchtest;
}

UPD. Это ещё что за ерунда? Вот здесь:

{this.searchtest.map((kef, i, a) => (
  <div style={style}>
    <div key={kef.name} data-id={kef.name}>
      name: {kef.name}
    </div>
    <div key={kef.id} data-id={kef.id}>
      id: {kef.id}
    </div>
  </div>
))}

Ключи вместо вложенных элементов должны быть у их общего предка:

{this.searchtest.map(n => (
  <div key={n.id}>
    <div>name: {n.name}</div>
    <div>id: {n.id}</div>
  </div>
))}

Comments

[mosikus]

Здравствуйте. Спасибо за ответ. Не фильтрует по буквам. Если в инпут написать "Text123" - ничего не найдено.
"123" - есть результат.

[0xD34F]

Поправил.