TypeScript enumeration into an array of objects

Question

I have an enumeration defined as follows:

export enum GoalProgressMeasurements { Percentage = 1, Numeric_Target = 2, Completed_Tasks = 3, Average_Milestone_Progress = 4, Not_Measured = 5 } 

However, I would like it to be represented as an array of objects / list from our API, as shown below:

 [{id: 1, name: 'Percentage'}, {id: 2, name: 'Numeric Target'}, {id: 3, name: 'Completed Tasks'}, {id: 4, name: 'Average Milestone Progress'}, {id: 5, name: 'Not Measured'}] 

Is there a simple and natural way to do this, or do I need to create a function that passes an enumeration for both int and string, and build objects into an array?

Answer 1

Enumerations are real objects that exist at runtime. So you can change the display by doing something like this:

 let value = GoalProgressMeasurements.Not_Measured; console.log(GoalProgressMeasurements[value]); // => Not_Measured 

Based on this, you can use the following code:

 export enum GoalProgressMeasurements { Percentage = 1, Numeric_Target = 2, Completed_Tasks = 3, Average_Milestone_Progress = 4, Not_Measured = 5 } let map: {id: number; name: string}[] = []; for(var n in GoalProgressMeasurements) { if (typeof GoalProgressMeasurements[n] === 'number') { map.push({id: <any>GoalProgressMeasurements[n], name: n}); } } console.log(map); 

Link: https://www.typescriptlang.org/docs/handbook/enums.html

Answer 2

The trick is that TypeScript "doubles" the display of the enumeration in the emitted object, so it can be accessed by both key and value.

 enum MyEnum { Part1 = 0, Part2 = 1 } 

will be released as

 { Part1: 0, Part2: 1, 0: 'Part1', 1: 'Part2' } 

Therefore, you must first filter the object before displaying it. So the @Diullei solution has the correct answer. Here is my implementation:

 // Helper const StringIsNumber = value => isNaN(Number(value)) === false; // Turn enum into array function ToArray(enumme) { return Object.keys(enumme) .filter(StringIsNumber) .map(key => enumme[key]); } 

Use it like this:

 export enum GoalProgressMeasurements { Percentage, Numeric_Target, Completed_Tasks, Average_Milestone_Progress, Not_Measured } console.log(ToArray(GoalProgressMeasurements)); 

Answer 3

A simple solution. You can use the following function to convert your Enum into an array of objects.

  buildGoalProgressMeasurementsArray(): Object[] { return Object.keys(GoalProgressMeasurements) .map(key => ({ id: GoalProgressMeasurements[key], name: key })) } 

If you need to remove this underscore, we can use the regular expression as follows:

 buildGoalProgressMeasurementsArray(): Object[] { return Object.keys(GoalProgressMeasurements) .map(key => ({ id: GoalProgressMeasurements[key], name: key.replace(/_/g, ' ') })) } 

Answer 4

If you are using ES6

This will give you an array of the values ​​of the given enumeration.

 enum colors = { "WHITE" : 0, "BLACK" : 1 } const colorValueArray = Object.values(colors); 

Answer 5

 class EnumHelpers { static getNamesAndValues<T extends number>(e: any) { return EnumHelpers.getNames(e).map(n => ({ name: n, value: e[n] as T })); } static getNames(e: any) { return EnumHelpers.getObjValues(e).filter(v => typeof v === 'string') as string[]; } static getValues<T extends number>(e: any) { return EnumHelpers.getObjValues(e).filter(v => typeof v === 'number') as T[]; } static getSelectList<T extends number, U>(e: any, stringConverter: (arg: U) => string) { const selectList = new Map<T, string>(); this.getValues(e).forEach(val => selectList.set(val as T, stringConverter(val as unknown as U))); return selectList; } static getSelectListAsArray<T extends number, U>(e: any, stringConverter: (arg: U) => string) { return Array.from(this.getSelectList(e, stringConverter), value => ({ value: value[0] as T, presentation: value[1] })); } private static getObjValues(e: any): (number | string)[] { return Object.keys(e).map(k => e[k]); } } 

Answer 6

You can do it as follows:

 export enum GoalProgressMeasurements { Percentage = 1, Numeric_Target = 2, Completed_Tasks = 3, Average_Milestone_Progress = 4, Not_Measured = 5 } export class GoalProgressMeasurement { constructor(public goalProgressMeasurement: GoalProgressMeasurements, public name: string) { } } export var goalProgressMeasurements: { [key: number]: GoalProgressMeasurement } = { 1: new GoalProgressMeasurement(GoalProgressMeasurements.Percentage, "Percentage"), 2: new GoalProgressMeasurement(GoalProgressMeasurements.Numeric_Target, "Numeric Target"), 3: new GoalProgressMeasurement(GoalProgressMeasurements.Completed_Tasks, "Completed Tasks"), 4: new GoalProgressMeasurement(GoalProgressMeasurements.Average_Milestone_Progress, "Average Milestone Progress"), 5: new GoalProgressMeasurement(GoalProgressMeasurements.Not_Measured, "Not Measured"), } 

And you can use it like this:

 var gpm: GoalProgressMeasurement = goalProgressMeasurements[GoalProgressMeasurements.Percentage]; var gpmName: string = gpm.name; var myProgressId: number = 1; // the value can come out of drop down selected value or from back-end , so you can imagine the way of using var gpm2: GoalProgressMeasurement = goalProgressMeasurements[myProgressId]; var gpmName: string = gpm.name; 

You can extend GoalProgressMeasurement with additional object properties as needed. I use this approach for every enum, which should be an object containing more than a value.