Convert Dictionary into an Array of objects in JavaScript
Last Updated :
28 Aug, 2024
In JavaScript, dictionaries also known as objects are used to store key-value pairs. But sometimes you might need to convert this data into an array of objects so that you can handle or utilize particular parts more easily.
Below are the multiple ways of converting a Dictionary into an Array of objects in JavaScript:
Using Object.keys() and map()
One popular method for converting a dictionary into an array of objects is to map the dictionary keys using the map method into an array of objects by first extracting them using Object.keys().
Example: The below code will explain the use of the object.keys() and map() methods to convert a dictionary into an array of objects.
JavaScript
const dictionaryToArrayOfObjects = (dictionary) => {
return Object.keys(dictionary).map(key => ({
key: key,
value: dictionary[key]
}));
};
const myDictionary = {
name: "John",
age: 30,
city: "New York"
};
const arrayOfObjects =
dictionaryToArrayOfObjects(myDictionary);
console.log(arrayOfObjects);
Output[
{ key: 'name', value: 'John' },
{ key: 'age', value: 30 },
{ key: 'city', value: 'New York' }
]
Using Object.entries()
JavaScript introduced the Object.entries() method with ECMAScript 2017 (ES8). This method returns an array of key and values of the operating object. This technique offers a clear alternative to using Object.keys() manually to complete a conversion.
Example: The below code will explain the use of object.entries() method to convert a dictionary into an array of objects.
JavaScript
const dictionaryToArrayOfObjects = (dictionary) => {
return Object.entries(dictionary).
map(([key, value]) => ({ key, value }));
};
const myDictionary = {
name: "John",
age: 30,
city: "New York"
};
const arrayOfObjects =
dictionaryToArrayOfObjects(myDictionary);
console.log(arrayOfObjects);
Output[
{ key: 'name', value: 'John' },
{ key: 'age', value: 30 },
{ key: 'city', value: 'New York' }
]
Using for/in loop
Alternatively, you can manually iterate through the entries of the dictionary using a for/in loop and construct an array of objects.
Example: The below code implements the for/in loop to convert a dictionary into an array of objects.
JavaScript
const dictionaryToArrayOfObjects = (dictionary) => {
const result = [];
for (const key in dictionary) {
if (Object.prototype.
hasOwnProperty.call(dictionary, key)) {
result.push({ key, value: dictionary[key] });
}
}
return result;
};
const myDictionary = {
name: "John",
age: 30,
city: "New York"
};
const arrayOfObjects =
dictionaryToArrayOfObjects(myDictionary);
console.log(arrayOfObjects);
Output[
{ key: 'name', value: 'John' },
{ key: 'age', value: 30 },
{ key: 'city', value: 'New York' }
]
Using Object.values() and map()
This approach leverages the Object.values() method, which returns an array of a given object's own enumerable property values, and the Object.keys() method to construct an array of objects. This method is particularly useful when you only care about the values and want to include the corresponding keys in the result.
Example: The below code demonstrates using Object.values() and Object.keys() to convert a dictionary into an array of objects.
JavaScript
const dictionaryToArrayOfObjects = (dictionary) => {
return Object.keys(dictionary).map((key, index) => ({
key: key,
value: Object.values(dictionary)[index]
}));
};
const myDictionary = {
name: "John",
age: 22,
city: "New York"
};
const arrayOfObjects = dictionaryToArrayOfObjects(myDictionary);
console.log(arrayOfObjects);
Output[
{ key: 'name', value: 'John' },
{ key: 'age', value: 22 },
{ key: 'city', value: 'New York' }
]
Using reduce() Method
The reduce() method can also be used to transform a dictionary into an array of objects. This method allows you to accumulate results as you iterate through the object's entries. It provides a clear, concise way to build an array by processing each key-value pair and appending an object for each.
Example: The below code demonstrates using the reduce() method to convert a dictionary into an array of objects.
JavaScript
const dictionaryToArrayOfObjects = (dictionary) => {
return Object.keys(dictionary).reduce((acc, key) => {
acc.push({ key: key, value: dictionary[key] });
return acc;
}, []);
};
const myDictionary = {
name: "Nikunj",
age: 22,
city: "Surat"
};
const arrayOfObjects = dictionaryToArrayOfObjects(myDictionary);
console.log(arrayOfObjects);
Output[
{ key: 'name', value: 'Nikunj' },
{ key: 'age', value: 22 },
{ key: 'city', value: 'Surat' }
]
Similar Reads
JavaScript - Convert Two-Dimensional Array Into an Object
Here are the different methods to convert the two-dimensional array into an object in JavaScript.1. Using a for LoopThe simplest way to convert a two-dimensional array into an object is by iterating through the array using a for loop and assigning key-value pairs.JavaScriptconst a = [['name', 'Abhay
2 min read
How to Convert an Object into Array of Objects in JavaScript?
Here are the different methods to convert an object into an array of objects in JavaScript1. Using Object.values() methodObject.values() method extracts the property values of an object and returns them as an array, converting the original object into an array of objects.JavaScriptconst a = { java:
3 min read
How to convert arguments object into an array in JavaScript ?
The arguments object is an array-like object that represents the arguments passed in when invoking a function. This array-like object does not have the array prototype chain, hence it cannot use any of the array methods. This object can be converted into a proper array using two approaches: Method 1
5 min read
How to Convert an Array of Objects to Map in JavaScript?
Here are the different methods to convert an array of objects into a Map in JavaScript1. Using new Map() ConstructorThe Map constructor can directly create a Map from an array of key-value pairs. If each object in the array has a specific key-value structure, you can map it accordingly.JavaScriptcon
3 min read
How to convert a map to array of objects in JavaScript?
A map in JavaScript is a set of unique key and value pairs that can hold multiple values with only a single occurrence. Sometimes, you may be required to convert a map into an array of objects that contains the key-value pairs of the map as the values of the object keys. Let us discuss some methods
6 min read
How to Push an Array into Object in JavaScript?
To push an array into the Object in JavaScript, we will be using the JavaScript Array push() method. First, ensure that the object contains a property to hold the array data. Then use the push function to add the new array in the object.Understanding the push() MethodThe array push() method adds one
2 min read
How to Convert Object to Array in JavaScript?
In this article, we will learn how to convert an Object to an Array in JavaScript. Given an object, the task is to convert an object to an Array in JavaScript. Objects and Arrays are two fundamental data structures. Sometimes, it's necessary to convert an object to an array for various reasons, such
4 min read
JavaScript - Convert an Array to an Object
These are the following ways to convert an array to an Object:1. Using JavaScript Object.assign() method The first approach is using the Object.assign() method. This method copies the values of all enumerable properties from source objects(one or more) to a target object.JavaScriptlet a = [1, 2, 3,
2 min read
JavaScript- Convert an Object to JS Array
Objects in JavaScript are the most important data type and form the building blocks for modern JavaScript. These objects are quite different from JavaScriptâs primitive data types (Number, String, Boolean, null, undefined, and symbol). Methods to convert the Objects to JavaScript Array:1. Using Obje
3 min read
Different Ways to Crate an Array of Objects in JavaScript ?
Objects in JavaScript are key-value pairs, making them suitable for representing structured data. Also, an array in JavaScript is a versatile data structure that can hold a collection of values. When dealing with objects, an array can be used to store multiple objects. An array of objects allows you
3 min read