JavaScript has only one data type which can contain multiple values: Object. An Array is a special form of an object.
When we work with Javascript objects it is almost certain that we will find ourselves in a situation like this.
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
}]
};
This example is quite common, and happens on several different occasions.
In the example, we have a user, he has registered the addresses. One address is the main one, which we can imagine to be the home address, and a second alternative address which we can consider the address of a relative.
Ok, let’s imagine that you need to access the first address to complete the delivery, how can we do that?
Javascript allows us to access the elements of an object in two different ways, using either dot notation or using brackets, or a mixture of the two.
console.log(user['id']); // 42
//or
console.log(user.id); // 42
Well, as you can see, the addresses are inside an Array, which is nothing more than a special type of object.
Array is an excellent way to manipulate information and on this post i give 4 Better Ways to use the Javascript array filter method, to filter objects from your array.
But Arrays has some characteristics that separates it from Objects its elements are sorted and start with the index [0].
Since we have two elements in the Address Array, the main address will be in the index [0] and the alternate address in the index [1].
Let’s use the two notations to extract the first address, it looks like this:
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
}
*/
Okay, with the code above we already have access to the address we initially wanted.
Now, we can access each attribute of the first address (street, city, country and the main address identification).
It looks like this:
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
By the way, I’m using literal templates to write the code above, it’s a syntax that helps to format the text among other things, but we’ll talk about it another time.
One last thing, if you need to extract the alternative address now, how would you do it? Well, it’s basically the same code we saw above, with one small difference, this time we’ll access the index [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
Okay, we already know how to access both addresses. Finally, I’ll just show you what a real situation would be, how it could be implemented.
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
There’s probably a more “elegant” way to solve this problem. But it’s just an initial outline. If you want to leave your suggestion or comment, don’t be shy, leave a comment or send me a message. If your solution is good I’ll put it here in the post.
See you in the next post.
Didn´t work sadly. Tried console.log(user['address'][0]); with my array inside my object and got 'undefined' error messages.
I'd like to comment. I see this a lot: objects with internal arrays and how to use array methods with them, etc. But what about an Object of objects? What is the advantage or disadvantage of using Objects without organizing the data without internal arrays? const user = { id42: { address1: { street: "Av Brasil, 200", city: 'São Paulo', country: "Brazil", mainAddress: true }, address2: { street: "Av Atlantica, 150", city: 'Rio de Janeiro’, country: "Brazil", mainAddress: false } } };
Leave a Reply