In ReactJS, you may often encounter scenarios where you need to convert an object's values or keys into an array. This can be useful when you want to iterate through the object's properties, to transform the data in a different format. Let's learn how to convert an object's values and keys to arrays in ReactJS


Tables of Contents
Convert an Object's Values to an array
Converting Object Keys to an Array
Convert an Object's Entries to an array
Converting string keys to numeric
Get an Object's Values as an Array using Object.keys()
Get an object's entries as an array using Object.keys()

To convert an object's values into an array, you can use the Object.values() method. Here's a step-by-step guide:

1. Suppose you have an object, dataObject, and you want to convert its values into an array:

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};



2. Use the Object.values() method to convert an object values into an array:

const valuesArray = Object.values(userObj);

3. Now, valuesArray will contain [ 'Nagi', 'India', 'Bangalore', 'Central part of city' ], which you can use in your React component as needed.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

const valuesArray = Object.values(userObj);


console.log(valuesArray)

// Output:
// [ 'Nagi', 'India', 'Bangalore', 'Central part of city' ]



Converting Object Keys to an Array:


If you want to convert the object's keys into an array, you can use the Object.keys() method:

1. Suppose you have the same object, dataObject:

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

2. Use the Object.keys() method to convert the keys into an array:


const keysArray = Object.keys(userObj);


3. Now, keysArray will contain [ 'name', 'country', 'city', 'address' ], which you can use in your React component as needed.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

const keysArray = Object.keys(userObj);


console.log(keysArray)

// Output:
// [ 'name', 'country', 'city', 'address' ]



Convert an Object's Entries to an array

If you need to convert an object's entries to an array, use the Object.entries() method.

The Object.entries method returns an array of the given object's key-value pairs.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

const newEntries = Object.entries(userObj);


console.log(newEntries)

// Output:
/*
[
[ 'name', 'Nagi' ],
[ 'country', 'India' ],
[ 'city', 'Bangalore' ],
[ 'address', 'Central part of city' ]
]
*/



If you need to convert the array of key-value pairs back to an object, use the Object.fromEntries() method.


const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

const newEntries = Object.entries(userObj);


console.log(newEntries)

// Output:
/*
[
[ 'name', 'Nagi' ],
[ 'country', 'India' ],
[ 'city', 'Bangalore' ],
[ 'address', 'Central part of city' ]
]
*/

const newUserObj = Object.fromEntries(newEntries)

console.log(newUserObj)

//Output
/*
{
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city'
}
*/

The Object.fromEntries() method converts an array of key-value pairs to an object.

You can also use the Object.keys() method to get an object's values as an array.

Converting string keys to numeric

If you need to convert an object's entries to an array and convert string keys to numeric keys, use the Array.map() method.

const numericObj = { '0': 10, '1': 11, '2': 22 }

const entries = Object.entries(numericObj).map(([key, value]) => [
Number(key),
value,
])


console.log(entries)

// Output
// [ [ 0, 10 ], [ 1, 11 ], [ 2, 22 ] ]

We employed the Object.entries() method to obtain an array containing the object's key-value pairs. The subsequent action involves employing the Array.map() method to traverse this array and convert each key into a numeric value.

Get an Object's Values as an Array using Object.keys()

This is a three-step process:

1. Use the Object.keys() method to get an array of the object's keys.

2. Use the Array.map() method to iterate over the array.

3. Access the object at each key and return each value.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

const keysArray = Object.keys(userObj);

console.log(keysArray)

// Output:
// [ 'name', 'country', 'city', 'address' ]

const values = keysArray.map(key => {
return userObj[key]
})

console.log(values)
// Output:
// [ 'Nagi', 'India', 'Bangalore', 'Central part of city' ]


We used the Object.keys method to get an array containing the object's keys.

Subsequently, we utilized the Array.map() method to traverse the key array, extracting the value associated with each key.

For each key in the key array, the callback function provided to Array.map() is invoked.

The Array.map() method then assembles a fresh array consisting of the values we extracted from the callback function.

It's worth noting that this approach is somewhat less direct and more verbose and should primarily be considered when needing to accommodate very outdated web browsers, such as Internet Explorer.

Get an object's entries as an array using Object.keys()

The same approach can be used if you need to get an object's entries as an array.

const userObj = {
name: 'Nagi',
country: 'India',
city: 'Bangalore',
address: 'Central part of city',
};

const keysArray = Object.keys(userObj);


const values = keysArray.map(key => {
return [key, userObj[key]]
})

console.log(values)
// Output:
/*
[
[ 'name', 'Nagi' ],
[ 'country', 'India' ],
[ 'city', 'Bangalore' ],
[ 'address', 'Central part of city' ]
]
*/

We used the Array.map() method to iterate over an array of the object's keys.

On each iteration, we return an array containing the current key and value.