javascript - How can I loop through enum values for display in radio buttons? - Stack Overflow

admin管理员组

文章数量:1128511

What is the proper way to loop through literals of an enum in TypeScript?

(I am currently using TypeScript 1.8.1.)

I've got the following enum:

export enum MotifIntervention {
    Intrusion,
    Identification,
    AbsenceTest,
    Autre
}

export class InterventionDetails implements OnInit
{
    constructor(private interService: InterventionService)
    {
        let i:number = 0;
        for (let motif in MotifIntervention) {
            console.log(motif);
        }
    }

The result displayed is a list

0
1
2
3
Intrusion,
Identification,
AbsenceTest,
Autre

I do want only four iterations in the loop as there are only four elements in the enum. I don't want to have 0 1 2 and 3 that seem to be index numbers of the enum.

What is the proper way to loop through literals of an enum in TypeScript?

(I am currently using TypeScript 1.8.1.)

I've got the following enum:

export enum MotifIntervention {
    Intrusion,
    Identification,
    AbsenceTest,
    Autre
}

export class InterventionDetails implements OnInit
{
    constructor(private interService: InterventionService)
    {
        let i:number = 0;
        for (let motif in MotifIntervention) {
            console.log(motif);
        }
    }

The result displayed is a list

0
1
2
3
Intrusion,
Identification,
AbsenceTest,
Autre

I do want only four iterations in the loop as there are only four elements in the enum. I don't want to have 0 1 2 and 3 that seem to be index numbers of the enum.

• javascript
• arrays
• typescript
• enums
• element

Share Improve this question Follow edited Oct 11, 2020 at 1:32 Peter Mortensen 31.6k2222 gold badges109109 silver badges133133 bronze badges asked Sep 7, 2016 at 14:35 Anthony BrenelièreAnthony Brenelière 63.4k1616 gold badges4848 silver badges5858 bronze badges 1

• 1 checkout this enum-for package – Sang Commented Jun 3, 2020 at 16:33

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 694

Two options:

for (let item in MotifIntervention) {
    if (isNaN(Number(item))) {
        console.log(item);
    }
}

Or

Object.keys(MotifIntervention).filter(key => !isNaN(Number(MotifIntervention[key])));

(code in playground)

---

Edit

String enums look different than regular ones, for example:

enum MyEnum {
    A = "a",
    B = "b",
    C = "c"
}

Compiles into:

var MyEnum;
(function (MyEnum) {
    MyEnum["A"] = "a";
    MyEnum["B"] = "b";
    MyEnum["C"] = "c";
})(MyEnum || (MyEnum = {}));

Which just gives you this object:

{
    A: "a",
    B: "b",
    C: "c"
}

You can get all the keys (["A", "B", "C"]) like this:

Object.keys(MyEnum);

And the values (["a", "b", "c"]):

Object.keys(MyEnum).map(key => MyEnum[key])

Or using Object.values():

Object.values(MyEnum)

Enum Keys

Here is a solution which works for both string and numeric enums:

function enumKeys<T extends object>(e: T) {
  const keys = Object.keys(e)
  const isStringEnum = isNaN(Number(keys[0]))
  return isStringEnum ? keys : keys.slice(keys.length / 2)
}

To use simply do as following:

enum En {
  A,
  B,
  C,
}

console.log(enumKeys(En)); // ["A", "B", "C"]

enum Es {
  A = "a",
  B = "b",
  C = "c",
}

console.log(enumKeys(Es)); // ["A", "B", "C"]

Here is TS playground

---

Enum values

Also, to get enum values one can use:

function enumValues<T extends object>(e: T) {
  const values = Object.values(e)
  const isNumEnum = e[e[values[0]]] === values[0]
  return isNumEnum ? values.slice(values.length / 2) : values
}

To use simply do as following:

enum En {
  A,
  B,
  C,
}

console.log(enumValues(En)); // [0, 1, 2]

enum Es {
  A = "a",
  B = "b",
  C = "c",
}

console.log(enumValues(Es)); // ["a", "b", "c"] 

Here is TS Playground

export enum MotifIntervention {
    Intrusion,
    Identification,
    AbsenceTest,
    Autre
}

const values = Object.values(MotifIntervention)

values.forEach(val => {
    //  -------> here is the value
})

const keys = Object.keys(MotifIntervention)

keys.forEach(key => {
    //  -------> here is the key
})

for string keys:

export enum LOCAL_STORAGE_KEYS {
  AUTH = 'auth',
  PERMISSIONS = 'permissions'
}

const storageKeys = Object.values(LOCAL_STORAGE_KEYS)

storageKeys.forEach(val => {
    //  -------> here the val is type if LOCAL_STORAGE_KEYS 
})

You can also use Enum.enums.

example Enum:

const eventType = new Enum({
    value0: 0,
    value1: 1,
    value2: 2
});

loop through like this:

for (let enumValues of eventType.enums) {
    let key = enumValues.key;
    let value = enumValues.value;
}

You can then display any key or value.

本文标签： javascriptHow can I loop through enum values for display in radio buttonsStack Overflow