How to Convert Enum to Array of objects in Typescript?
- Admin
- Sep 20, 2023
- Typescript
Enum
is a new data type introduced in typescript. Its data is a group of constants.
Data in the enum
object are of String and number type.
You can check my other posts on typescript Enum object
.
- enum size in typescript
- typescript enumeration
- Check String or Integer exists in Enum
- String to Enum
The object is key and value properties are enclosed in and the array is a group of types enclosed in [].
Enum and array of objects are of different types and structures,
We have to write a code to handle conversions to display in the drop-down on the UI element.
There are many ways we can do convert Enum to Array of objects,
But I am going to use ES8 Object.entries .
Given an enum declaration
export enum Weeks {
MONDAY = 1,
TUESDAY= 2,
WEDNESDAY = 3,
THURSDAY = 4,
FRIDAY = 5,
SATURDAY=6,
SUNDAY=7,
}
and This post talks about converting to an array of objects as below
[
{ id: 1, name: "MONDAY" },
{ id: 2, name: "TUESDAY" },
{ id: 3, name: "WEDNESDAY" },
{ id: 4, name: "THURSDAY" },
{ id: 5, name: "FRIDAY" },
{ id: 6, name: "SATURDAY" },
{ id: 7, name: "SUNDAY" },
];
ES8 Object.entries in JavaScript
ES8
introduced the Object. entries()
method which works in the latest browsers, and polyfill
is required for support in older browsers.
- Retrieve keys and values using Object.entries() method.
- Use the for-of loop to iterate each element of enum data.
- Check for the key value of numbers and ignore the id of strings.
- Add the array of keys and values to the newly created array using the push method.
const arrayObjects = [];
for (const [propertyKey, propertyValue] of Object.entries(Weeks)) {
if (!Number.isNaN(Number(propertyKey))) {
continue;
}
arrayObjects.push({ id: propertyValue, name: propertyKey });
}
console.log(arrayObjects);
Summarize
In this post, you learned how to convert Enum to a typescript array with an example