Extract string value of an ENUM in a Typescript Object

Question

I have an Enum:

export enum DistanceMeasure {
Miles, Kilometers

}

To use in a user object:

export class User {
... some stuff
MaxTravelDistance:  number;
DistanceMeasure:    DistanceMeasure;
MaxTravelTime:      TimeSpan;
... some more stuff

}

So the info comes from the server as 0 (zero) or 1 for the DistanceMeasure and thats fine. But I need to present the string e.g. "Miles".

In my (Angular/Ionic) app, the output of

      console.log(user.DistanceMeasure);

is '0' (zero). However I read that to extract the enum string you should use it as an index. If I do:

      console.log(user.DistanceMeasure[0]);

It comes back as undefined.

Why is that? since the user.DistanceMeasure is of type DistanceMeasure? Is it no longer an enum ? Thanks.

DistanceMeasure[0] should output Miles. user.DistanceMeasure is not an array nor an object . it's a property of the User class and it's value can be something defined in the DistanceMeasure enum — Antonis
– Antonis, Commented May 28, 2019 at 9:44

Robby Cornelissen · Accepted Answer · 2019-05-28 09:44:19Z

2

That should be DistanceMeasure[user.DistanceMeasure], as in the following snippet:

enum DistanceMeasure {
    Miles, Kilometers
}

class User {
    DistanceMeasure:　DistanceMeasure;
}

const user = new User();
user.DistanceMeasure = 0;

console.log(DistanceMeasure[user.DistanceMeasure]); // Miles

What's contributing greatly to the confusion is that fact that you're not following naming conventions, and thus end up with properties that have the same name as your enum.

answered May 28, 2019 at 9:44

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brett JB Over a year ago

Yes, I had reached that conclusion myself shortly after, however the edit to my question seems to have become lost. Trying to keep the same names as used on the server. Thank you for your help.

Krantisinh · Accepted Answer · 2019-05-28 09:43:57Z

1

By default, enums have numeric value as 0,1,2... You can define your enum like:

export enum DistanceMeasure {
    Miles = 'Miles',
    Kilometers = 'Kilometers'
}

And now DistanceMeasure.Miles will have value as 'Miles'.

answered May 28, 2019 at 9:43

Krantisinh

1,72915 silver badges18 bronze badges

1 Comment

Antonis Over a year ago

He needs the numeric values. He just needs to display the key title

Pascal · Accepted Answer · 2019-05-28 09:45:44Z

0

Have a look at String Enum in the Typscript documentation

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

And i suggest to look into this so u understand how they work

answered May 28, 2019 at 9:45

Pascal

2,3905 gold badges23 silver badges39 bronze badges

Comments

marcopiii · Accepted Answer · 2019-05-28 09:46:46Z

0

If you don't define custom values enum has integer values starting from 0 in the order they are declared. If you want them to have string values you have to declare them like

enum DistanceMeasure {
    Miles = 'MILES',
    Kilometers = 'KILOMETERS'
}

answered May 28, 2019 at 9:46

marcopiii

8988 silver badges31 bronze badges

Comments

Shamaila Mahmood · Accepted Answer · 2019-05-28 09:59:42Z

0

Since you have not explicity defined the values for your enums so they have got default values of 0 and 1. Now you are getting 0 and 1 from server, so that maps correctly to the enum. What you do is to write a pipe to format 0 as "Mile" and 1 as "Kilometer".

@Pipe({
  name: 'unit'
})
export class UnitPipe implements PipeTransform {

  constructor() {
  }
  transform(value: DistanceMeasure ): any {
    return value === DistanceMeasure.Mile ? 'Mile' : 'Kilometer'
  }

}

And in your html use it like this

{{ user.DistanceMeasure | unit }}

answered May 28, 2019 at 9:59

Shamaila Mahmood

813 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2019-05-28 10:23:42Z

0

Const enums can only use constant enum expressions and unlike regular enums they are completely removed during compilation. Const enum members are inlined at use sites. This is possible since const enums cannot have computed members.

So, from your enum you can create a new variable distanceMeasure to use it like as an array:

export enum DistanceMeasure {
  Miles, Kilometers
}

const distanceMeasure = [DistanceMeasure.Miles, DistanceMeasure.Kilometers];

console.log(distanceMeasure[0]); // --> Miles

Read more about TypeScript Enums at: https://www.typescriptlang.org/docs/handbook/enums.html

edited May 28, 2019 at 10:23

answered May 28, 2019 at 9:47

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

Extract string value of an ENUM in a Typescript Object

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related