1

A função abaixo está renderizando todos os nomes de usuários, eu preciso incluir nela uma forma de filtrar os usuários renderizados de acordo com o que for digitado em um input text, tentei usar o includes() mas não estou conseguindo, como poderia aplica-lo nessa função???

function renderFoundUsers() {
  let foundUsersHTML = `<div>`;

  foundUsers.filter((user) => {
    const { name } = user;

    const userHTML = `
    <div>
    <ul>
    <li>${name}</li>
    </ul>
    </div>
    `;
    foundUsersHTML += userHTML;
  });
  foundUsersHTML += `</div>`;

  tabfoundUsers.innerHTML = foundUsersHTML;
}

1 Resposta 1

0

O método .filter retorna uma nova array, filtrada. Para isso funcionar tens de retornar dentro da callback desse filter um valor Booleano (true ou false) para indicar ao .filter se deve incluir ou não essa entrada que está a ser iterada. Para isso podias passar um argumento à função com o texto a procurar, e dentro da função filtrar ou não, conforme esse texto a filtrar seja vazio ou não.

Sugiro fazeres isso assim:

function renderFoundUsers(searchString) {
  const filteresUsers = searchString ? foundUsers.filter(({
    name
  }) => name.includes(searchString)) : foundUsers;

  const usersHTML = filteresUsers.map(({
    name
  }) => {
    return `
    <div>
      <ul>
        <li>${name}</li>
      </ul>
    </div>
    `;
  }).join('');

  tabfoundUsers.innerHTML = `<div>${usersHTML}</div>`;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .