JavaScript tem apenas um tipo de dados que pode conter vários valores: Objeto. O Array é uma forma especial de objeto. Por isso lidar com objetos aninhados em Javascript é o que de fato você precisa saber.
Quando trabalhamos com Javascript é quase certo que vamos nos deparar em situação como esta. Portanto é bom saber com antecedência como lidar como trabalhar com objetos aninhados em Javascript.
Vamos usar esse objeto como exemplo:
let user = {
id: 42,
address: [{
street: "Av Brasil, 200",
city: 'São Paulo',
country: "Brazil",
mainAddress: true
},{
street: "Av Atlantica, 150",
city: 'Rio de Janeiro’,
country: "Brazil",
mainAddress: false
}]
};
Quando trabalhamos com Javascript é quase certo que vamos nos deparar em situação como esta. Portanto é bom saber com antecedência como lidar com objetos aninhados.
Esse exemplo é bem comum, e acontece em diversas ocasiões diferentes.
No exemplo, temos um usuário, ele tem registrados dos endereços. Um endereço é o principal, que podemos imaginar que seja o endereço de casa, e um segundo endereço alternativo que podemos considerar o endereço de um parente.
Certo, vamos imaginar que você precise acessar o primeiro endereço para completar a entrega, como podemos fazer isso?
Javascript nos permite acessar os elementos de um objeto de duas maneira diferentes, usando a notação de ponto ou usando colchetes, ou uma mistura dos dois.
console.log(user['id']); // 42
//or
console.log(user.id); // 42
Bom, como você pode ver, os endereços estão dentro de um Array, que nada mais é que um tipo especial de objeto.
Array são uma excelente maneira de manipular informação, você pode checar esse post com 4 Maneiras diferentes de usar o método Javascript filter, terminando esse post passa lá pra conferir.
Mas Arrays tem algumas caracterÍsticas que o separa dos Objetos os seus elementos são ordenados e começam pelo índice [0].
Como temos dois elementos no Array de endereços, o endereço principal vai estar no índice [0] e o endereço alternativo no índice [1].
Vamos utilizar as duas notações para extrair o primeiro endereço, fica assim:
console.log(user['address'][0]);
/*
{
street: 'Av Brasil, 200',
city: 'São Paulo',
country: 'Brazil',
mainAddress: true
}
*/
//or
console.log(user.address[0]);
/*
{
street: 'Av Brasil, 200',
city: 'São Paulo',
country: 'Brazil',
mainAddress: true
}
*/
Pronto, com o código acima ja temos acesso ao endereço que queríamos inicialmente.
Agora, podemos acessar cada atributo do primeiro endereço (rua, cidade, pais e a identificação de endereço principal).
Fica assim:
console.log(`Main ${user.address[0]['street']}, ${user.address[0]['city']}, ${user.address[0]['country']}`);
// Main Av Brasil, 200, São Paulo, Brazil
// or
console.log(`Main: ${user.address[0].street}, ${user.address[0].city}, ${user.address[0].country}`);
// Main Av Brasil, 200, São Paulo, Brazil
A propósito estou usando templates literais para escrever o código acima, é uma sintaxe que ajuda a formatar o texto dentre outra coisas, mas falaremos disso em uma outra oportunidade.
Um ultimo detalhe, se caso você precise agora extrair o endereço alternativo, como você faria? Bom é basicamente o mesmo código que vimos acima, com uma pequena diferença, dessa vez vamos acessar o índice [1].
console.log(`Alternative: ${user.address[1]['street']}, ${user.address[1]['city']}, ${user.address[1]['country']}`);
// Alternative: Av Atlantica, 150, Rio de Janeiro, Brazil
// or
console.log(`Alternative: ${user.address[1].street}, ${user.address[1].city}, ${user.address[1].country}`);
// Alternative: Av Atlantica, 150, Rio de Janeiro, Brazil
Certo, já sabemos como acessar ambos endereços. Pra finalizar vou só mostrar como seria uma situação real, como poderia ser implementado.
const checkDelivered = (actualAddrres, delivered) => {
const address1 = `Main: ${user.address[0].street}, ${user.address[0].city}, ${user.address[0].country}`;
const address2 = `Alternative: ${user.address[1].street}, ${user.address[1].city}, ${user.address[1].country}`;
if (actualAddrres === user.address[0]) {
if (delivered) {
return "Item delivered";
}
return address2;
} else {
if (actualAddrres === user.address[1]) {
if (delivered) {
return "Item delivered";
}
return address1;
} else {
if (delivered) {
return "Item delivered to wrong address";
}
return address1;
}
}
}
console.log(checkDelivered(user.address[0], true)); // Item delivered
console.log(checkDelivered(user.address[0], false)); // Alternative: Av Atlantica, 150, Rio de Janeiro, Brazil
console.log(checkDelivered(user.address[1], true)); // Item delivered
console.log(checkDelivered(user.address[1], false)); // Main: Av Brasil, 200, São Paulo, Brazil
console.log(checkDelivered(user.address[2], true)); // Item delivered to wrong address
console.log(checkDelivered(user.address[2], false)); // Main: Av Brasil, 200, São Paulo, Brazil
Provavelmente existe maneira mais “elegante” de resolver esse problema. Mas é apenas um esboço inicial. Se quiser deixar a sua sugestão ou comentário, não se acanhe, deixe um comentário ou me mande uma mensagem. Se a sua solução for boa eu coloco aqui no post.
É isso, até o próximo post.
Mais um post de qualidade!
Deixe um comentário