Como filtrar array de objetos baseado nos atributos em JavaScript

Neste artigo você vai aprender a como filtrar array de objetos baseado nos atributos em JavaScript, de uma maneira simples e fácil

Fala programador(a), beleza? Bora aprender mais sobre arrays, objetos e JavaScript!

Para filtrar um array de vários objetos é simples, temos um método específico de arrays para isso

O nome dele é filter, é utilizado diretamente em um array e também podemos inserir uma função anônima que funciona como filtro

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Ou seja, retornamos apenas os elementos que ‘passam’ na nossa filtragem

Veja um exemplo prático:

const users = [
 {name: "Matheus", approved: true},
 {name: "João", approved: false},
 {name: "Pedro", approved: true}
]

const approvedUsers = users.filter((user) => {
	return user.approved
})

console.log(approvedUsers)

Aqui temos um array de usuários aprovados e não aprovados, queremos apenas os aprovados no sistema

Utilizamos a função filter para obter os usuários que precisamos

Estamos retornando apenas os que estão approved como true, como já um booleano nem precisamos de um if

A reposta final é true ou false, mas você pode inserir uma lógica mais complexa também a partir de um if, veja este exemplo:

const users = [
	{name: "Matheus", approved: true},
	{name: "João", approved: false},
	{name: "Pedro", approved: true}
]

const userWithNameMatheus = users.filter((user) => {
	if(user.name === "Matheus") {
  	return user
  }
})

console.log(userWithNameMatheus)

Aqui retornamos os usuários que tem o nome de Matheus, é apenas um exemplo simples, note que você pode inserir qualquer lógica no if

Conclusão

Neste artigo você aprendeu a como filtrar array de objetos baseado nos atributos em JS

Utilizamos o método filter, que serve como uma luva para o nosso problema

Note que podemos aplicar uma condição lógica para retornar o dado que necessitamos

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!