Create Multidimensional Array from an Object

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() method

• We can revert back to the object by calling Object.fromEntries() on the multidimensional array

In which cases do you think you can find this useful?