pesquisar valor digitado no input em um array | JavaScript: programando na linguagem da web

Tudo bem pessoal, alguém poderia me ajudar. Estou com outro trabalho, aonde tem que ser feito o seguinte:

HTML tem um INPUT tipo text, qualquer entrada de texto ao digitar, ele busca no array, ex: digitei letra "c", ele busca pelo nome e sobrenome as pessoas que tem a letra "c". Eu já carreguei o array no JavaScript e já filtrei tudo que preciso com map e destructuring.
já peguei o valor digitado no input. Porem não sei como faz para procurar esse valor digitado no array, o que consegui é se eu digitar o nome, ex: se tiver "ana" no array e eu procurar ele encontra, agora se eu digitar "a", ele da erro e não encontra nada. Como faço para pesquisar com o valor do input no array?

window.addEventListener("load",() =>{

    invocacao_();

})

async function invocacao_(){
    const res = await fetch("https://randomuser.me/api/?seed=javascript&results=100&nat=BR&noinfo");
    const json = await res.json();
    v_array = json.results.map(busca => {

        const{name, last, dob,gender} = busca;

        return{
            name: name.first,
            sobrenome: name.last,
            idade: dob.age,
            sexo: gender
        }
    });
    console.log(v_array)

    render();
}

function render(){

    var valor_Input = document.querySelector(".texto").value;

}

Olá Daniel, tudo bem com você?

Eu não sei se entendi muito bem, mas vou tentar te dar algumas ideias que podem dar certo :)

Para demonstrar o meu exemplo eu vou basear no que você fez, entretanto da seguinte maneira:

Sempre que o usuário digitar um valor eu irei fazer a pesquisa para filtrar os dados

Para começar, precisamos capturar essa resposta que estamos recebendo, para isso dentro de invocacao_() irei tirar o render() e dar apenas um:

return v_array;

Dessa maneira dentro do nosso eventListener irei ter o seguinte código:

window.addEventListener("load",async () =>{
    const data = await invocacao_();

Agora irei criar uma função que faça um filtro em nosso array com base no que você disse:

function search(text, pessoas){
    console.log(
    pessoas.filter( pessoa => pessoa.name.includes(text) || pessoa.sobrenome.includes(text))
    );
}

A variável text será o valor do campo de texto

Veja que o que eu estou fazendo é que para cada elemento do array eu estou pegando o seu nome ou sobrenome e vendo se ele contém o valor digitado pelo usuário

O filter nos devolve uma nova lista com os elementos que deram verdadeiro para o teste, coloquei um console.log apenas para ter ideia qual foi o resultado retornado pela busca :)

Agora só precisamos capturar o input e adicionar um evento de tecla, para isso vou voltar em nosso eventListener:

window.addEventListener("load",async () =>{
    const input = document.querySelector(".texto");
    const data = await invocacao_();

    input.addEventListener('keypress', () => search(input.value, data));
})

Dessa forma quando digitarmos A teremos o seguinte retorno:


2: Object { name: "Evangelino", sobrenome: "Almeida", idade: 36, … }

3: Object { name: "Aléxio", sobrenome: "Rezende", idade: 46, … }

4: Object { name: "Angélica", sobrenome: "Fernandes", idade: 33, … }

5: Object { name: "Delani", sobrenome: "Alves", idade: 35, … }

6: Object { name: "Susano", sobrenome: "Aragão", idade: 37, … }

7: Object { name: "Adónis", sobrenome: "Nunes", idade: 68, … }

8: Object { name: "Almerinda", sobrenome: "Almeida", idade: 34, … }

9: Object { name: "Aniceto", sobrenome: "Barbosa", idade: 66, … }

E uma busca um pouco mais específica, por exemplo, o nome Wanda

1) […]
0: Object { name: "Wanda", sobrenome: "Dias", idade: 56, … }

E dessa maneira você pode estar filtrando da maneira que você desejar, utilizando os métodos de String, eu optei pelo includes, mas as vezes é mehor um startsWith, ou coisa parecida :)

Abraços e Bons Estudos!

Mergulhe em programação