Skip to main content

How to Convert an Object to an Array of its Values in JavaScript

A common data transformation in JavaScript is to convert an object into an array. Depending on your needs, you might want an array of the object's values, its keys, or its [key, value] pairs. The Object class provides a set of static methods (.values(), .keys(), .entries()) that make these conversions simple and declarative.

This guide will teach you how to use these built-in methods to convert an object to an array of its values, an array of its keys, and an array of its entries, helping you choose the right tool for your specific data transformation task.

To Get an Array of Values: Object.values()​

Use Case: When you have an object and you only need its values, discarding the keys.

The Object.values() method is the most direct and idiomatic way to achieve this. It returns an array containing the values of the object's own enumerable properties, in the same order as a for...in loop.

For example, you have an object where the values are the data you need, and the keys are just identifiers.

// Problem: How to get an array of just the user objects?
const usersById = {
  user1: { id: 1, name: 'Alice' },
  user2: { id: 2, name: 'Bob' },
  user3: { id: 3, name: 'Charlie' },
};

Solution : this single, readable line is all you need.

const usersById = {
  user1: { id: 1, name: 'Alice' },
  user2: { id: 2, name: 'Bob' },
};

const userArray = Object.values(usersById);

console.log(userArray); // Output: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]
note

This is the recommended best practice for getting an array of an object's values.

To Get an Array of Keys: Object.keys()​

Use Case: When you need a list of all the keys (property names) in an object.

The Object.keys() method returns an array of a given object's own enumerable property names.

const usersById = {
  user1: { id: 1, name: 'Alice' },
  user2: { id: 2, name: 'Bob' },
};

const userKeys = Object.keys(usersById);

console.log(userKeys); // Output: ['user1', 'user2']

How to Combine Object.keys() with map()​

Before Object.values() was introduced, a common way to get an array of values was to first get the keys and then use map() to look up each value. While Object.values() is now the direct solution, this pattern is still useful to know.

const usersById = {
  user1: { id: 1, name: 'Alice' },
  user2: { id: 2, name: 'Bob' },
};

const userArray = Object.keys(usersById).map(key => usersById[key]);

console.log(userArray); // Output: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]

To Get an Array of [Key, Value] Pairs: Object.entries()​

Use Case: When you need to preserve both the keys and the values and convert them into an array of [key, value] pairs. This is extremely useful for then using other array methods like map() or filter().

const usersById = {
  user1: { id: 1, name: 'Alice' },
  user2: { id: 2, name: 'Bob' },
};

const entriesArray = Object.entries(usersById);

console.log(entriesArray);

Output:

[
  [ 'user1', { id: 1, name: 'Alice' } ],
  [ 'user2', { id: 2, name: 'Bob' } ]
]
note

This format is also the required input for the new Map() constructor and the Object.fromEntries() method, making Object.entries() a powerful tool for transformations.

Practical Example: Transforming API Data​

Imagine you receive API data as an object, but you need to transform it into an array of objects that includes the original key as a property. Object.entries() followed by map() is the perfect pattern for this.

For example, you have this object and need to convert it into a cleaner array format.

const apiResponse = {
  'a-123': { name: 'Widget A', price: 100 },
  'b-456': { name: 'Widget B', price: 150 },
};

Solution:

const apiResponse = {
  'a-123': { name: 'Widget A', price: 100 },
  'b-456': { name: 'Widget B', price: 150 },
};

const productsArray = Object.entries(apiResponse).map(([id, productData]) => {
  return {
    id: id,
    ...productData, // Use the spread syntax to copy the nested object's properties
  };
});

console.log(productsArray);

Output:

[
  { id: 'a-123', name: 'Widget A', price: 100 },
  { id: 'b-456', name: 'Widget B', price: 150 }
]

Conclusion​

JavaScript's modern Object static methods provide a clean, declarative, and readable way to convert objects into arrays.

  • To get an array of just the values, the best and most direct method is Object.values(obj).
  • To get an array of just the keys, use Object.keys(obj).
  • To get an array of [key, value] pairs for more complex transformations, use Object.entries(obj).

These methods are the recommended best practices and are superior to manual for...in loops for their clarity and conciseness.

Table of Contents