Multiple ways to Convert Enum to Array of objects in Typescript with examples

In this tutorial, you’ll learn various methods to convert an enum into arrays of objects, strings, and key-value pairs in TypeScript, along with examples.

#TypeScript Enum Constants

An enum is a new data type in TypeScript, representing a group of constants. Data within an enum object can be of type String or Number. Most programming languages support enums.

Most programming languages support enums. You can check more about Typescript enum

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

An Object contains key-value properties enclosed in {} while an array is a collection of types enclosed in [].

Since enum and array are different types of objects with structured data, we need to write code to handle conversions to display them in UI elements like drop-downs.

Let’s declare and initialize an enum in TypeScript:

export enum Weeks {
  MONDAY = 1,
  TUESDAY = 2,
  WEDNESDAY = 3,
  THURSDAY = 4,
  FRIDAY = 5,
  SATURDAY = 6,
  SUNDAY = 7,
}

Here’s the output after converting it into an array of objects

[
  {
    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",
  },
];

#How to convert Enum to Object Array in Typescript?

There are several ways to convert an Enum to an Array of objects in TypeScript.

• using ES8 Object.entries

  In this example, the Enum keys and values are converted to an array of object keys and values. ES8 introduced the Object.entries() method which works in modern browsers, requiring a polyfill for older ones.

  The Object.entries() method returns key-value pairs by iterating through an object. Here’s an example:

  Notes:

  • Retrieve keys and values using the 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.

  Here is an example

  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);
  

• Using String Array in typescript

Sometimes, you need to convert Enum values into an array. Object.values returns keys and values in order for the Enum object. Here’s how you can do it:

console.log(Object.values(Weeks));

Output:

 ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY", 1, 2, 3, 4, 5, 6, 7]

Alternatively, you can filter only strings into an array using this code:

const arrayValues = Object.values(Weeks).filter(
  (value) => typeof value === "string",
);
console.log(arrayValues);

output:

["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY"]

#Convert Enum values as Array key and value strings in Typescript

In this example, we iterate through an Enum object using a for-in loop and construct an array by pushing key-value pairs as described below:

let output = [];

for (let key in Weeks) {
  output.push({ name: key, number: Weeks[key] });
}
console.log(res);

Output:

[
  {
    "name": "1",
    "number": "MONDAY"
  },
  {
    "name": "2",
    "number": "TUESDAY"
  },
  {
    "name": "3",
    "number": "WEDNESDAY"
  },
  {
    "name": "4",
    "number": "THURSDAY"
  },
  {
    "name": "5",
    "number": "FRIDAY"
  },
  {
    "name": "6",
    "number": "SATURDAY"
  },
  {
    "name": "7",
    "number": "SUNDAY"
  },
  {
    "name": "MONDAY",
    "number": 1
  },
  {
    "name": "TUESDAY",
    "number": 2
  },
  {
    "name": "WEDNESDAY",
    "number": 3
  },
  {
    "name": "THURSDAY",
    "number": 4
  },
  {
    "name": "FRIDAY",
    "number": 5
  },
  {
    "name": "SATURDAY",
    "number": 6
  },
  {
    "name": "SUNDAY",
    "number": 7
  }
]

#Summarize

In summary, you’ve learned how to convert Enums into TypeScript array objects with various methods.