TypeScript Enum to Object Array
Last Updated :
02 Sep, 2024
TypeScript enums allow us to define or declare a set of named constants i.e. a collection of related values which could either be in the form of a string or number or any other data type. To convert TypeScript enum to object array, we have multiple approaches.
Example:
enum DaysOfWeek {
Sunday = 'SUN',
Monday = 'MON',
Tuesday = 'TUE'
}
After Converting to object arrays
[ { label: 'Sunday', value: 'SUN' },
{ label: 'Monday', value: 'MON' },
{ label: 'Tuesday', value: 'TUE' }
]
Below are the approaches used to convert TypeScript enum to object array:
Approach 1: Manual Mapping
Manually iterate through the enum keys and values, creating an array of objects.
Example: In this example, We define a TypeScript enum Color
with three color options. The colorArrayManual
is then generated by iterating through the enum, extracting keys and values to form an array of objects representing each color with its label and value.
JavaScript
enum Color {
Red = 'RED',
Green = 'GREEN',
Blue = 'BLUE',
}
const colorArrayManual: { label: string; value: string }[] = [];
for (const key in Color) {
if (Color.hasOwnProperty(key)) {
colorArrayManual.push({ label: key, value: Color[key] });
}
}
console.log(colorArrayManual);
Output:
[
{ label: 'Red', value: 'RED' },
{ label: 'Green', value: 'GREEN' },
{ label: 'Blue', value: 'BLUE' }
]
Approach 2: Using Object.entries()
Using Object.entries()
, we extract key-value pairs from the TypeScript enum and then map over these pairs to create an array of objects.
Example: In this example, The colorArrayEntries
is generated by applying Object.entries()
to the Color
enum, extracting key-value pairs, and mapping them into an array of objects containing the label and value of each color.
JavaScript
enum Color {
Red = 'RED',
Green = 'GREEN',
Blue = 'BLUE',
}
const colorArrayEntries = Object.entries(Color)
.map(([label, value]) => ({ label, value }));
console.log(colorArrayEntries);
Output:
[
{ label: 'Red', value: 'RED' },
{ label: 'Green', value: 'GREEN' },
{ label: 'Blue', value: 'BLUE' }
]
Approach 3: Using Object.keys() and map()
This approach involves using Object.keys()
to obtain an array of enum keys and then mapping over them to create an array of objects.
Example: In this example, The colorArrayKeysMap
is created by first obtaining the keys of the Color
enum using Object.keys()
. These keys are then mapped to form an array of objects representing each color with its label and value.
JavaScript
enum Color {
Red = 'RED',
Green = 'GREEN',
Blue = 'BLUE',
}
const colorArrayKeysMap = Object.keys(Color)
.map((label) => ({ label, value: Color[label] }));
console.log(colorArrayKeysMap);
Output:
[
{ label: 'Red', value: 'RED' },
{ label: 'Green', value: 'GREEN' },
{ label: 'Blue', value: 'BLUE' }
]
Approach 4: Using Object.values() and map()
This method leverages Object.values() to extract enum values, then applies map() to convert each value into an object with label and value properties, generating an array representation of enum values, aiding in various operations.
Example: In this example we are using Object.values() to extract enum values, then map() transforms each value into an object with both label and value properties, creating an array representing enum values.
JavaScript
enum Color {
Red = 'RED',
Green = 'GREEN',
Blue = 'BLUE',
}
const colorArrayValuesMap = Object.values(Color)
.map(value => ({ label: value, value }));
console.log(colorArrayValuesMap);
Output:
[{
label: "RED",
value: "RED"
}, {
label: "GREEN",
value: "GREEN"
}, {
label: "BLUE",
value: "BLUE"
}]
Similar Reads
TypeScript Object The Array Type In TypeScript, the Array Type is used to specify and enforce the type of elements that can be stored in an array, enhancing type safety during development. This adaptability ensures reusability across diverse data types, as exemplified by the Array type (e.g., number[] or string[]). Syntaxlet myArra
2 min read
TypeScript Array Object.entries() Method The Object.entries() method in TypeScript is used for creating an array of key-value pairs from an object's keys and values. This method simplifies the process of iterating over an object's properties and enables easier data manipulation.SyntaxObject.entries(obj);Parameterobj: It takes the object as
3 min read
TypeScript Array Object.values() Method Object.values() is a functionality in TypeScript that returns an array extracting the values of an object. The order of elements is the same as they are in the object. It returns an array of an object's enumerable property values. Syntax:Object.values(object);Parameters:object: Here you have to pass
2 min read
How can I Define an Array of Objects in TypeScript? In TypeScript, the way of defining the arrays of objects is different from JavaScript. Because we need to explicitly type the array at the time of declaration that it will be an Array of objects. In this article, we will discuss the different methods for declaring an array of objects in TypeScript.
6 min read
TypeScript Arrays An array is a user-defined data type. An array is a homogeneous collection of similar types of elements that have a contiguous memory location and which can store multiple values of different data types.An array is a type of data structure that stores the elements of a similar data type and consider
5 min read
How to Get an Object Value By Key in TypeScript In TypeScript, we can get an object value by key by accessing the specific properties within the objects of the dynamic type. This can be done using Dot Notation, Bracket Notation, and Optional Chaining. In this article, we will explore all these approaches along with their implementation in terms o
5 min read
How to map Enum/Tuple to Object in TypeScript ? Mapping enum or tuple values to objects is a common practice in TypeScript for handling different data representations. This article explores various methods to map enumerations (enums) and tuples to objects, providing examples to illustrate each method.Table of ContentManually mapping Enum to Objec
3 min read
How To Get Types From Arrays in TypeScript? In TypeScript, arrays are a common data structure, but sometimes it's necessary to extract the types of elements stored in an array for type-checking or validation purposes. TypeScript provides several ways to extract types from arrays, enabling more type-safe operations.We will explore different me
3 min read
How to Cast Object to Interface in TypeScript ? In TypeScript, sometimes you need to cast an object into an interface to perform some tasks. There are many ways available in TypeScript that can be used to cast an object into an interface as listed below: Table of Content Using the angle bracket syntaxUsing the as keywordUsing the spread operatorU
3 min read
TypeScript Enums Type TypeScript Enums Type is not natively supported by Javascript, but it's a notable feature of the Typescript Programming language. In general, enumerations shortly called "enum" are available in most programming languages to create named consonants. Enums allow us to create a set of named constants,
5 min read