CODEWITHSUNDEEP
javascriptarraystypescriptenumselement
Anthony Brenelière
Anthony Brenelière

Reputation: 63450

How can I loop through enum values for display in radio buttons?

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.

Upvotes: 435

Views: 460572

Answers (4)

husayt
husayt

Reputation: 15139

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

Upvotes: 3

user3201935
user3201935

Reputation: 1

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.

Upvotes: 0

Mohammad Reza Mrg
Mohammad Reza Mrg

Reputation: 2033

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

Upvotes: 1

Nitzan Tomer
Nitzan Tomer

Reputation: 164129

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)

Upvotes: 695

Related Questions