Convert a json value to a enum value

Question

I like to convert a json string value to enum so it can show/render a custom string on the html page. error message: Type '{ id: number; name: string; status: string; }[]' is not assignable to type 'Status[]'

I have a json record like this:

{ id: 1, name: 'Some name', status: 'STATUS01' },

status.enum.ts

export enum Status {
  'STATUS01' = 'Operational',
  'STATUS02' = 'Some other status'
}

That enum is used in a model

import { Status } from './status.enum';

export class ServiceState {
  id: number;
  name: string;
  status: Status;
}

In the service there is a function to retrieve al statuses (dummy data):

getStatuses(): Observable<ServiceState[]> {
    const response = [
      { id: 1, name: 'One', status: 'STATUS01' },
      { id: 2, name: 'Two', status: 'STATUS01' },
      { id: 3, name: 'OneTwo', status: 'STATUS02' },}
    ];
    return of(response);
  }

the return is throwing the error

Please add the code which threw the error.

Barremian
– Barremian

2020-06-17 13:11:22 +00:00
Commented Jun 17, 2020 at 13:11 — Barremian
– Barremian, Commented Jun 17, 2020 at 13:11

Poul Kruijt · Accepted Answer · 2020-06-17 13:41:40Z

3

You should actually use the enum value:

export enum Status {
  STATUS01 = 'Operational',
  STATUS02 = 'Some other status'
}

const response = [
  { id: 1, name: 'One', status: Status.STATUS01 },
  { id: 2, name: 'Two', status: Status.STATUS01 },
  { id: 3, name: 'OneTwo', status: Status.STATUS02 },
  // ...
];

If you want to map the values from the enum:

getStatuses(): Observable<ServiceState[]> {
  const response = [
    { id: 1, name: 'One', status: 'STATUS01' },
    { id: 2, name: 'Two', status: 'STATUS01' },
    { id: 3, name: 'OneTwo', status: 'STATUS02' },
  ];

  return of(response).pipe(
    map((states) => states.map((state) => ({
      ...state,
      status: Status[state.status]
    } as ServiceState)
  );
}

edited Jun 17, 2020 at 13:41

answered Jun 17, 2020 at 13:20

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

4 Comments

Babulaas Over a year ago

the webapi will return a STATUS01 (string) not Status.STATUS01. This is some dummy data.

Poul Kruijt Over a year ago

@Babulaas Then your typing is incorrect, or you have to map the value in your response

Babulaas Over a year ago

I had to map the values. I had a long day. thank you for the fix.

Poul Kruijt Over a year ago

@Babulaas But it's not even 4pm in Holland :D, you should try to work less, otherwise your productivity will go down too much!

Barremian · Accepted Answer · 2020-06-17 13:35:41Z

1

I still don't understand your question, but you might have to map the response from the API to match your class type.

Service

public getStatuses(): Observable<ServiceState[]> {
  return this.http.get('url').pipe(
    map(data => data.forEach(item => {
      item.status = Status[item.status];
    }))
  );
}

^{If you're using the class only to assert the type, then a simple interface would suffice.}

edited Jun 17, 2020 at 13:35

answered Jun 17, 2020 at 13:28

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Collectives™ on Stack Overflow

Convert a json value to a enum value

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related