Transform the data from a JSON object into an enum value

Question

Transform the data from a JSON object into an enum value

I am facing an issue where I need to convert a JSON string value into an enum to display a custom string on an HTML page. The error message states: Type '{ id: number; name: string; status: string; }[]' is not assignable to type 'Status[]'

Here is an example of the JSON record:

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

In the file status.enum.ts, we have the following enum defined:

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

This enum is used in a model as shown below:

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

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

Within the service, there is a function to retrieve all 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 current issue arises when trying to handle the return values.

json angular typescript serialization enums

Answer 1

Answer №1

It is recommended to utilize the enum values like this:

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 },
  // ...
];

To effectively map the enums' values:

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

Answer 2

It is recommended to utilize the enum values like this:

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 },
  // ...
];

To effectively map the enums' values:

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

Answer 3

Answer №2

I'm still not clear on what you're asking, but it seems like you may need to align the API response with your class structure.

Solution

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

^{If you're only using the class for defining the type, consider using a simple interface instead.}

Answer 4

I'm still not clear on what you're asking, but it seems like you may need to align the API response with your class structure.

Solution

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

^{If you're only using the class for defining the type, consider using a simple interface instead.}

Transform the data from a JSON object into an enum value

Answer №1

Answer №2

Similar questions

Utilize Angular 17 to populate the date field in an edit form with saved data

a callback may seem like it's not a function, but in reality, it is

Exploring the world of two-dimensional arrays in D3 programming

Remove specific data points from an array within a serialized post_meta in PHP

Encountering an error when attempting to access undefined property while using a method as a callback

Different Ways to Remove an Element from an Array in TypeScript

The argument labeled as 'Subscription' cannot be assigned to the parameter labeled as 'string' in Angular

Leveraging JSON within the store and forward mechanism of WSO2 ESB

@vx/enhanced responsiveness with TypeScript

A guide on incorporating "this" keyword within a Mongoose UserSchema method using TypeScript

Tips for dynamically binding the image source in Angular based on certain conditions

Difficulty locating the module in Typescript/Javascript

Utilize mapping to object and preserve type inference

Running the nx dep-graph command on certain projects can be accomplished by specifying the project names

An error was encountered with Ajax and JSONP due to an unexpected token causing a SyntaxError

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

Guide to forming a nested JSON structure with specific key names in Python

What is the best way to divide a string that contains n concatenated JSON strings in JavaScript or Node.js?

Update the regular expression pattern to extract nested tags and store them in an array of objects

What is the process for decoding data into an embedded struct?