Convert an Enum to an Array of Objects in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 13, 2022

banner

Check out my new book

Convert an Enum to an Array of Objects in TypeScript #

To convert an enum to an array of objects:

  1. Use the Object.keys() method to get an array of the enum's keys.
  2. Filter out the unnecessary values for numeric enums.
  3. Use the map() method to iterate over the array, returning an object on each iteration.
index.ts
// ✅ For NUMERIC Enums enum NumericEnum { Small, Medium, Large, } const arr1 = Object.keys(NumericEnum) .filter((v) => isNaN(Number(v))) .map((name) => { return { id: NumericEnum[name as keyof typeof NumericEnum], name, }; }); // 👇️ [{id: 0, name: 'Small'}, {id: 1, name: 'Medium'}, {id: 2, name: 'Large'}] console.log(arr1); // ✅ For STRING Enums enum StringEnum { Small = 'S', Medium = 'M', Large = 'L', } const arr2 = Object.keys(StringEnum).map((name) => { return { name, value: StringEnum[name as keyof typeof StringEnum], }; }); // 👇️ [{name: 'Small', value: 'S'}, {name: 'Medium', value: 'M'}, {name: 'Large', value: 'L'}] console.log(arr2);

The code snippet shows how to convert numeric and string enums to array of objects.

Enums in TypeScript are real objects and exist at runtime, so we are able to use the Object.keys method to get an array of the enum's keys.

index.ts
// ✅ For NUMERIC Enums enum NumericEnum { Small, Medium, Large, } // 👇️ ['0', '1', '2', 'Small', 'Medium', 'Large'] console.log(Object.keys(NumericEnum)); // ✅ For STRING Enums enum StringEnum { Small = 'S', Medium = 'M', Large = 'L', } // 👇️ ['Small', 'Medium', 'Large'] console.log(Object.keys(StringEnum));
The output for numeric enums includes the values, so we had to use the filter() method to filter out any of the unnecessary values from the array.

The last step is to use the Array.map method to loop over the array of enum names and return an object containing the name and value on each iteration.

We used keyof typeof in the examples to cast the string to enum, so we can access the corresponding value.

If you need an array containing the names or values of a string enum, you can use the Object.keys() and Object.values() methods.

index.ts
// ✅ For STRING Enums enum StringEnum { Small = 'S', Medium = 'M', Large = 'L', } const keys2 = Object.keys(StringEnum); // 👇️ ['Small', 'Medium', 'Large'] console.log(keys2); const values2 = Object.values(StringEnum); // 👇️ ['S', 'M', 'L'] console.log(values2);

The approach with numeric enums is similar, but since the Object.keys() method returns the keys and values, we have to filter out the unnecessary values.

index.ts
// ✅ For NUMERIC Enums enum NumericEnum { Small, Medium, Large, } const names1 = Object.keys(NumericEnum).filter((v) => isNaN(Number(v))); console.log(names1); // 👉️ ['Small', 'Medium', 'Large'] const values1 = Object.values(NumericEnum).filter((v) => !isNaN(Number(v))); console.log(values1); // 👉️ [0, 1, 2]
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.