JavaScript is rich in built in methods that sometimes can go by without you noticing.
In this short tutorial, we are going to see how we can use built in methods to construct a multidimensional array from an object.
First, let us assume we have an object that looks like this:
const cart = {
phone: {
brand: "Techno Camon 18",
price: "Sh. 25000",
},
shoes: {
brand: "Oxford",
price: "Sh. 18000",
},
jeans: {
brand: "Levis",
price: "Sh. 2000",
},
};
The above snippet, we have an object called cart
with three keys corresponding to a product. Each of these keys hold a object as a a value.
The value for each of the objects contains two properties, a brand
and price
.
Great! Now what we want is to come up with a multidimensional array of this object, cart
.
Let us do it
let cartAsArray = Object.entries(cart);
console.log(cartAsArray);
/* => [
[
"phone",
{
"brand": "Techno Camon 18",
"price": "Sh. 25000"
}
],
[
"shoes",
{
"brand": "Oxford",
"price": "Sh. 18000"
}
],
[
"jeans",
{
"brand": "Levis",
"price": "Sh. 2000"
}
]
]*/
In the above snippet, we have used Object.entries()
method to convert the object, cart
into a multidimensional array.
As you can see, we have three arrays, each with two elements. The first element is the item name and the second element is an object containing the brand and the price.
Use Case
In the case where you want to loop through the object, one can easily use the for...in
loop which iterates through the object keys.
However, in the case where you could like to order the items in a certain way, Object.entries()
can be very helpful..
Let us say for instance we want to order our cart items in alphabetical order.
This can be done this way:
let orderedCartItems = Object.entries(cart).sort();
console.log(orderedCartItems);
/* => [
[
"jeans",
{
"brand": "Levis",
"price": "Sh. 2000"
}
],
[
"phone",
{
"brand": "Techno Camon 18",
"price": "Sh. 25000"
}
],
[
"shoes",
{
"brand": "Oxford",
"price": "Sh. 18000"
}
]
] */
That is nice
As you can see, by invoking the Array.prototype.sort()
method on the multidimensional array, we are able to sort the cart items alphabetically and in ascending order.
What if I want my object back?
There are cases where you would want to have the object back. I get that and here is how you can maneuver.
cart = Object.fromEntries(orderedCartItems);
console.log(cart);
/* => {
"jeans": {
"brand": "Levis",
"price": "Sh. 2000"
},
"phone": {
"brand": "Techno Camon 18",
"price": "Sh. 25000"
},
"shoes": {
"brand": "Oxford",
"price": "Sh. 18000"
}
}
*/
Did you see that? Yeaah we got the object back but this time round it is ordered alphabetically.
While I know you can have creative ways to use these techniques, the example provided above is just for demonstration.
Key Takeaways
We can turn an object into a multidimensional array using
Object.entries()
methodWe can revert back to the object by calling
Object.fromEntries()
on the multidimensional array
Top comments (1)
Ever brilliant Mkuu