How to Loop Through Enum Values in TypeScript

By the end of this page, you will understand why looping over a numeric enum in TypeScript shows both numbers and names, how enum reverse mapping works, and how to get only the values you want for tasks like rendering radio buttons.

TypeScript enums are compiled into JavaScript objects. For numeric enums, TypeScript creates a two-way mapping:

• from name to number
• from number back to name

For example, this enum:

enum MotifIntervention {
  Intrusion,
  Identification,
  AbsenceTest,
  Autre
}

becomes conceptually similar to:

{
  0: "Intrusion",
  1: "Identification",
  2: "AbsenceTest",
  3: "Autre",
  Intrusion: 0,
  Identification: 1,
  AbsenceTest: 2,
  Autre: 3
}

That is why a for...in loop prints both numeric keys and string keys.

This matters because enums are often used for:

• form options
• dropdowns
• radio buttons
• status values
• API-related constants

If you do not understand the reverse mapping behavior, you may accidentally render duplicate options or process the wrong values.

Think of a numeric enum like a bilingual dictionary:

• one side says Intrusion -> 0
• the other side says 0 -> Intrusion

When you loop through the whole object, you are opening both sides of the dictionary, so you see entries in both directions.

If you only want labels for radio buttons, you should read just one side of the dictionary instead of both.

The most common way to loop through only the names of a numeric enum is to filter out numeric keys.

enum MotifIntervention {
  Intrusion,
  Identification,
  AbsenceTest,
  Autre
}

const names = Object.keys(MotifIntervention).filter(key => isNaN(Number(key)));

console.log(names);
// ["Intrusion", "Identification", "AbsenceTest", "Autre"]

Why this works

• Object.keys(...) returns all keys from the enum object
• numeric enums contain keys like "0", "1", as well as "Intrusion"
• filter(key => isNaN(Number(key))) keeps only the non-numeric keys

Example for radio buttons

enum MotifIntervention {
  Intrusion,
  ,
  ,
  
}

 motifOptions = .()
  .( ((key)));

 ( option  motifOptions) {
  .(option);
}

Consider this code:

enum MotifIntervention {
  Intrusion,
  Identification,
  AbsenceTest,
  Autre
}

const allKeys = Object.keys(MotifIntervention);
console.log(allKeys);

const namesOnly = allKeys.filter(key => isNaN(Number(key)));
console.log(namesOnly);

Step 1: The enum is created

TypeScript builds an object that contains:

{
  0: "Intrusion",
  1: "Identification",
  2: "AbsenceTest",
  3: "Autre",
  Intrusion: 0,
  Identification: 1,
  AbsenceTest: 2,
  Autre: 3
}

Step 2: reads all keys

Enums are often looped over when you need to build UI or enforce a controlled set of values.

Common use cases

• Radio buttons for predefined choices such as status or category
• Dropdown menus for user-selectable options
• Validation rules where input must match one of several allowed values
• API payloads where only known values are accepted
• Configuration settings such as themes, roles, or modes

Example: rendering radio button options

const motifOptions = Object.keys(MotifIntervention)
  .filter(key => isNaN(Number(key)));

You can then bind motifOptions in your component template.

Example: validating input

function isValidMotif(value: string): boolean {
  return Object.keys(MotifIntervention)
    .filter(key => ((key)))
    .(value);
}

In real projects, developers usually do not loop over enums directly inside random parts of the code every time. Instead, they create a reusable list of options.

Common pattern: build UI options once

enum MotifIntervention {
  Intrusion,
  Identification,
  AbsenceTest,
  Autre
}

const motifOptions = Object.keys(MotifIntervention)
  .filter(key => isNaN(Number(key)))
  .map(key => ({
    label: key,
    value: MotifIntervention[key as keyof typeof MotifIntervention]
  }));

This produces objects like:

[
  { label: "Intrusion", value: 0 },
  { label: "Identification", value: 1 },
  { label: "AbsenceTest", value:  },
  { : , :  }
]

1. Using for...in without understanding enum reverse mapping

Broken example:

for (const key in MotifIntervention) {
  console.log(key);
}

This prints both numeric and string keys for numeric enums.

Fix: filter the keys.

for (const key of Object.keys(MotifIntervention).filter(k => isNaN(Number(k)))) {
  console.log(key);
}

2. Assuming enums behave like arrays

Broken example:

console.log(MotifIntervention.length);

Enums are objects, not arrays. They do not have an array length.

use and filter if needed.

Numeric enum

enum MotifIntervention {
  Intrusion,
  Identification,
  AbsenceTest,
  Autre
}

Get only enum names

const names = Object.keys(MotifIntervention)
  .filter(key => isNaN(Number(key)));

Get only numeric values

const values = Object.values(MotifIntervention)
  .filter(value => typeof value === "number");

Build radio button options

const options = Object.keys(MotifIntervention)
  .filter(key => ((key)))
  .( ({
    : key,
    : [key  keyof  ]
  }));

Why does TypeScript enum iteration show both names and numbers?

Because numeric enums are compiled into objects with reverse mappings. They store both name -> value and value -> name.

How do I loop through only enum names in TypeScript?

Use:

Object.keys(MyEnum).filter(key => isNaN(Number(key)))

How do I loop through only enum values?

For numeric enums, use:

Object.values(MyEnum).filter(value => typeof value === "number")

Are string enums easier to use for display?

Yes. String enums do not create reverse mappings, so they are often simpler for UI display.

Should I use enums for radio button labels?

You can, but in many real applications a plain array of { label, value } objects is even clearer, especially when labels need formatting.

Is for...in wrong for enums?

• TypeScript enums — the main concept behind named sets of constant values.
• String enums — useful because they avoid reverse mapping and are easier to display.
• Object.keys — commonly used to get an object's enumerable property names.
• Object.values — useful when extracting just the values from an enum object.
• for...in loop — important to understand because it iterates over object keys.
• Arrays and map/filter — often used to transform enum data into UI-friendly option lists.
• Type assertions in TypeScript — helpful when indexing enum objects safely.
• Form option modeling — relevant when converting enums into radio button or dropdown data.