JavaScript

Como filtrar array de objetos baseado nos atributos em JavaScript

14 de dezembro de 2021

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

filtrar array de objetos baseado nos atributos capa

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

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x